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STORM 


FASTER EVERYTHING 


Introducing STORM, a hosting 
platform that helps your agency 
and websites run smoother. 82% 
of our customers pave ie a 


nt in site speeas 


STORM HAS 


TRANSFORMED 


OUR CLIENT'S 
BUSINESSES 


*Terms and conditions apply, please visit the website for more information 


OVER 130 


2x 


COOGLE. 


Nimbus Hosting are offering you a 
30-DAY FREE TRIAL of our 
revolutionary control panel STORM, 
with full access to explore just how 
much we can simplify how you 
manage your hosting. Don't just take 
it from us, take it from our clients. 


Call, email or visit us at 


0203 126 6782 


sales@nimbushosting.co.uk 
nim.host/clientstory 
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THE WEB DESIGNER MISSION 


HTML is all around us 


TML has been a building block of the 
web ever since the day it began. 
Without HTML where would we be? 
HTML is a much different animal to the 
one that was knocking around in the 
Nineties. It has grown with the web and 
now offers so much more. But using it 
the right way is what’s important. 

In our latest lead feature, Matt Crouch looks at 
the essential elements and APIs that HTML has to 
offer, why you should be using them and how 
they should be used in everyday design. 

Keeping HTML company are its two favourite 
friends, CSS and JavaScript. Discover a collection 
that will complement HTML and your builds. 


Welcome 
to the Issue 


Meta 


Welcome 


Elsewhere we go beyond the traditional confines of the 
web and look at how the Web of Things is connecting 
hardware and the browser. Thanks to the internet you 
can take control of hardware without even having to 
touch it. Learn how to build a simple example. 

In the final part of our Threejs series, Richard Mattka 
shows you how to load complex 3D models in WebGL. If 
you have the complete series you will have no problem 
creating some impressive 3D. If you want to get a back 
issue, head to www.myfavouritemagazines.co.uk/ 
web-designer-print-back-issues. 

Want to add some smart transition effects to video? 
Then make sure that you check out Mark Shufflebottom’s 
Curtainjs tutorial on page 62. 

As always, enjoy the issue. 


Web Designer finds out what's going on at 
Helsinki-based Futurice. Page 36 


Follow us on Twitter for all the news & conversation 
Visit our blog for opinion, freebies & more 


Video Tuition - 75 minutes of expert PHP video guides 
from Killersites (shop.killervideostore.com) 
Assets - 100 Essential brush strokes and 20 Vibrancy PS actions 
from Sparklestock (sparklestock.com) 
- Tutorial files and assets 


FileSilo www-filesilo.co.uk/webdesigner 
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Contributors 


This issue's panel of experts 


Welcome to that bit of the mag where we learn more 


about the featured writers and contributors... 


30 BEST 


weet 


site development easier and 
standards-friendly. Think you 


APIS 


aw 


Matt Crouch 


Matt is a software engineer 
who works for Vidsy in 
London. In this issue, he takes 
a look at the 30 best and 
latest HTML, CSS and JS APIs, 
as well as elements that make 


know all that HTML has to 
offer? You might be surprised 
by what you find ou 
Page 44 
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Paul Betteridge 


Paul has over 15 years’ 
experience leading 

digital organisations and 
pioneering digital marketing, 
across a range of 
competitive markets. In 

this issue he offers some 
essential pointers on licking 
the right keywords. Page 66 


Frank is a frontend 
developer and tech writer 
based in Nairobi, Kenya. In 
this tutorial, he introduces 
you to the basics of the 
ApexCharts JavaScript 
library and shows you 
how to create a simple 
dashboard. Page 80 


Tam Hanna 


| Tam has always found Node. 
js fascinating. This issue he 
looks at the Web of Things e) 
and how we can connect ¥, 
browser and hardware. Plus, 
he looks at Fastify, a way to 
create high-performance 
web apps without the 

[___*___| overhead. Page 86 


4 experts 


| Frank Kagumba | Mark Billen 


Mark is a freelancer writer 
who has been writing about 
web design and technology 
for over 15 years. In this issue 
; he get the inside scoop on 

f how Helium Creative 
worked on the rebrand 
project for drip pop's 

____________| stateside launch. Page 28 


Leon Brown 


Mark is a professor of 
Interaction Design at 
Sheridan College near 
Toronto. In this tutorial, Mark 
is showing the power of 
shaders to create advanced 
transition effects and 
interactions between videos 
with Curtainjs. Page 62 


Leon is a freelance web 
developer and trainer who 
assists web developers in 
creating efficient code for 
projects. This issue he 
recreates a host of 
techniques as inspired by 
the top-class sites seen 

in Lightbox. Page 16 


Richard Mattka 


Richard is an award-winning 
interactive director, designer 
and developer. In this fifth 
and final tutorial in the ‘Get 
started with Three js’ series, 
he shows you how to load 
complex 3D models in 
WebGL using the Three js 

| library. Page 56 


David Howell 


David is a journalist with 
over 20 years’ experience in 
publishing and runs his own 
| business, Nexus Publishing. 
In this issue he heads to 
Finland to talk with Futurice 
| and discover how they work, 
the tools they use and 

much more. Page 36 
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PUT A PAUSE 
IN YOUR DAY 


With so many demands from work, home and family, 
there never seem to be enough hours in the day for you. 
Why not press pause once in a while, curl up with your 
favourite magazine and put alittle oasis of ‘you’ in your day. 


OX 
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ENJOY A MAGAZINE MOMENT 


To find out more about Press Pause, visit; 


pauseyourday.co.uk 
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Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch... 
webdesigner@futurenet.com e @WebDesignerMag e www.creativeblog.com 


O08 When will the web go 3D? 
Web Designer takes a closer look at what Cover focus 


Mozilla has been up to with VR and AR. 


11 Theimportance of the 


visual experience 

Co-founder and CEO of DotcomWeavers, Amit 

Bhaiya, reinforces how important visuals are. 
12 WebKit: The best must-try 


resources out there 
Discover the libraries and frameworks you need. 


16 Lightbox 

A showcase of inspirational sites and the 

techniques used to create them. 
28 Lollipop gild 

Get the inside scoop on how Helium Creative 

rebranded drip pop’s stateside launch. 
36 Defining the future 

Find out how Futurice craft experiences, 

based on an innate understanding of more 

than just technology. 3 

that will help build better web experiences. CG 2 S & WJ S 

72 Backissues 
Catch up on any issues of Web Designer that 
you've missed by downloading a digital edition. 


74 Whatis the Web of Things? 44 
Discover how the Web of Things API is 


30 best HTML, CSS & JS APIs 


Discover the essential elements, tags and APIs 


connecting the web and hardware 


92 Hosting listings 
An extensive list of web hosting companies. 
Pick the perfect host for your needs. 


94 Course listings 
Want to start learning online? Check out 
what courses are out there with this list. 


NUCLEAR 


98 Nextmonth 


What's in the next issue of Web Designer? 
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TUTORIALS 


54 Create glitchy text effects 
How to introduce animated on/off effects to 
text in order to engage viewers. 


56 Getstarted with Threejs 
In the final part of the series, learn how to load 
complex 3D models in WebGL. 


FILESILO 


96 Getthe latest must-have 
resources and videos 


«75 minutes of expert PHP video 
guides from Killersites. 

¢100 essential brush strokes and 
20 PS actions from Sparklestock. 


62 Code WebGL transition effects 
Transition between videos in a slideshow using 
the Curtainjs library. 


66 Research your keywords 
Selecting the right keywords is crucial to SEO i EXPLORE OUL BRAND 
success. Try these essential techniques. r 


70 Codeachanging headline effect 
Introduce an eye-catching and engaging effect 
to ensure your headlines are read. 


74 + Whatisthe Web of Things? 
Find out how the Web of Things API is 
connecting the browser and hardware. 
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Visit the Web Designer online shop at 
myfavouritemagazines.co.uk 
for the latest issue, back issues and specials 


80 Buildinteractive visual charts 
Learn how to create a simple dynamic 
dashboard using the ApexCharts library. 


86 Node js, speed and HTTP 
By default, Nodejs is a JS runtime. Introducing 
the fast and low overhead web framework 
Fastify can make serving HTML simple. 


DIGITAL EDITION 


Do you want to get your hands on a digital edition? 
Head to your preferred app store, download, 
install and purchase the issue of choice. 
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today and 
save 20% 
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News 
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Header 


The tools, trends and news to 
inspire your web projects 


When will the web 
move from 2D to 3D? 


Slowly but surely VR and AR are coming to the web. 
Web Designer finds out what Mozilla has been up to 


rowsing the web brings 
home how users are still 
very much operating ina 
2D space. There are some 
beautifully designed sites out there with 
clever little design tricks that raise them 
above the rest, but it’s still all very flat. 
There is no doubt that 2D has its place on 
the web and it’s here to stay for a good 
while yet. But, how do we push the web 
forward? How do designers make that 
same rectangular viewing space more 
exciting? Animation and sound have 
added a different dimension, CSS is 
looking to break out of the box, but it’s 
still very much part of the 2D experience. 
3D is the next obvious evolution and it 
has been happening for a while, yet it’s 
still in its infancy. As with everything in 
web design and development, it’s about 
browser support and the creation of new 
technologies. WebVR and AR are two 
great technologies that will make the web 
amore engaging and immersive place, 


(4) CREATIVE BLOO 


creativeblog.com 


e tech job 


30 portfol 
check out 


when the art has finally been mastered. 
Augmented Reality (AR) is the technology 
that is currently pushing the web forward. 
With mobile being the preferred choice 
for web access, it provides the ideal 
platform with gyroscope, camera and 
more to bring the AR experience to life. 
WebVR is there as well, but it’s not flavour 
of the month quite like AR currently is. 
Mozilla have been giving the 
technologies a push for a few years now, 
with A-Frame, the web framework for 
building Virtual Reality (VR) experiences, 
making it much simpler than previously. 
And we can’t forget Jerome Etienne’s 
AR.js and the new AR libraries for iOS and 
Android. Late last year Mozilla released 
its experimental WebXR Viewer app. It 
was described by Mozilla as an app that 
“lets you view web pages created with the 
webxr-polyfill JavaScript library (github. 
com/mozilla/webxr-polyfill, an 
experimental library we created as part of 
our explorations. This app is not intended 


In-depth tutorials, 
expert tips, 
cutting-edge 
features, industry 
interviews, 
inspiration and 
opinion. Make 
sure to get your 
daily dose of 
creativity, design 
and development. 


Interviews 


news 


to be a full-fledged web browser, but 
rather a way to test, demonstrate and 
share AR experiments created with web 
technology”. You can read more at 
blog.mozvr.com/experimenting-with- 
ar-and-the-web-on-ios/. 

In arecent post Mozilla have been 
talking about the expansion of WebVR 
and Mixed Reality. They have “started the 
work of liberating VR and AR content 
from silos and headset stores, and 
making them accessible on the open 
web”. The post (hacks.mozilla. 
org/2018/09/webxtr/) talks about how 
Mozilla have entered a new phase of work 
on JavaScript APIs and what’s new. 
Interestingly, it is looking to “establish a 
technical foundation for development of 
AR experiences, letting creators integrate 
real-world media with contextual 
overlays that elevate the experience”. 
Check out the post to find out what’s 
happening and see what we can expect 
in the near future. We can’t wait. 
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today and save 
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GOOGLE 
CHROME 


How has Google 
grown over the 
last few years? 


Aug 2018 


59.67% 


Nearly 60 percent of the 
global browser market 


Aug 2017 


54.89% 


Five percent up on 
the previous year 


Aug 2016 


49.82” 


Still to break the 
halfway mark 


Aug 2015 


45,26” 


Slowest growth in the last few years 


Aug 2014 


Cicees 


Getting very close to 40 
percent market share 


Source: http://gs.statcounter.com 
(correct as of August 2018) 
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Graphics 

ChocoToy cute 
behance.net/chocotoy 

A collection of cute and (cuddly?) characters 
from the very talented ChocoToyStudio. 
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Colour picker 
KRTPOMIix 
bit.ly/2MOuuBo 
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ALBUMS 


FREE JAZZ EXPERIMENTAL 


DWARFS OF EAST AGOUZA - RATS DON’T 
EAT SYNTHESIZERS 


ALBUMS 


ELECTRONICS AVANTGARDE 


Typesetter 

Config 

bit.ly/2xnJ5Pi 

A condensed, geometric sans serif family 
consisting of 40 fonts in ten weights. 


ABCabc 


0123456789 
ABCabe 


01. VIITA TITAN 
titan.viita-watches.com/en 
Surprisingly simple but smart text 
effects engage the user. 


O02. KIKK Festival 
kikk.be/2018/en/home 

A spotlight effect reveals what 
lies beneath the surface. 


03. IN FOCUS 
in-focus.co.jp 

Click and hold to see new 
variations of onscreen video. 


04. The Blimp 
blimp.gr 

Neat interactive 3D effects 
bring album art to life. 


WordPress 
Tetsuo 


tetsuo.edge-themes.com 
A portfolio theme with attitude and glitch 


effects for a modern subversive feel. 
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The importance of 
visual experience 


The visual experience is essential for earning conversions and loyal customers 


nrecent years, the way people consume online content has become increasingly visual. 
Today, the visual experience on a website or app has a direct effect on the conversion rate. 
New Age consumers expect intelligent graphic design and they reward brands that offer 
high-quality visual experiences. Before getting into the ‘how’ of creating a great visual 
experience, it is important to understand the ‘why’. 

People shop with their senses. They touch, feel, taste, smell and see the things around them, and 
then make purchase and brand trust/loyalty decisions based on the received information. For online 
shopping, sight is the strongest sense as messages and visuals are communicated through screens 
and evoke immediate emotional effects. Some eCommerce experts believe that people decide 
whether to buy a product or service within the first few seconds of seeing it. As the saying goes, first 
impressions matter’. It pays (literally) to provide the best possible visual experience to prospective 
customers. How do companies build a conversion-focused visual experience into brand strategy? The 
answer is to focus on three important aspects of eCommerce visual content: branding; product 
content; and consistency. 

The first step is to set the stage for customers to trust a brand — long enough for these individuals 
to stick around and explore the products/services. Digital natives can spot stock imagery, and they 
either disregard it (at best) or leave the website (at worst) since the lack of originality cheapens the 
brand experience. Brands should choose authentic images over stock photos. The style, layout and 
navigation of a website or app should also match the brand identity and story. Whether a brand sells 
edgy clothing or sophisticated financial products, visitors need to visually understand the brand and 
feel that they are in the right place. The same principle applies to textual content a website. Text and 
the corresponding layout should tell a unique story, communicate the benefits of a brand and guide 
user actions/decisions. Good visual content makes it easy — and sometimes even fun — for people to 
do what brands want them to do. Once visitors decide they are in the right place, brands should give 
them a total view of products/services. For example, nowadays, one image of a product is mandatory. 
To take things a step further, however, brands should embrace a curated collection of images that 
showcase a variety of angles and depictions (860-degree product views, for example). A great visual 
experience answers most, if not all, consumer questions before they even need to ask. 

Amit Bha iya Additionally, original brand content that features real people wearing or using a product/service can 
Cofounder and CEO help potential customers envision themselves doing the same. These visual context cues are more 
dotcomweavers.com intriguing than standalone product shots. Incorporating interactive content such as instructional 
videos can also deepen the visual experience. The more value brands can demonstrate with content, 
—=SaamomaH ioauaqun,u]B.0Z the better. Beyond the latter, it is also important not to forget user-generated content (UGC). UGC 
includes reviews, ratings and images submitted by real customers. Today's consumers make purchase 
decisions based on what others have to say. This type of ‘social proof’ is an essential aspect of 
eCommerce and must be included in the visual experience. Last but by no means not least, visual 


6é For online shopping, experiences need to be consistent — and provide consistent quality — across all channels. The visual 
sight is the strongest experiences that customers buy into on a website must also translate on the corresponding app(s), 


marketing emails, social media channel(s), product packaging and in-store displays (where applicable). 
Sense as messages and A seamless visual experience matters. It enables companies to offer true omni-channel experiences 
: and solutions to customers. 
visuals are Moreover, brands should remember that visual content weaves a carefully crafted experience for 
: the end user to enjoy. At the end of the day, if the customer does not enjoy the experience or if it gets 
communicated interrupted, brands risk conversion. On the other hand, with positive experiences, there is greater 
potential for a returning, loyal customer. Compelling visual experiences are the future of online 
through screens 99 business. Improving these experiences does not have to feel overwhelming. Brands should take things 
a step at atime. Start small with extra product photography and then go from there. A better visual 
experience can only help businesses stay competitive and continue to thrive in 2018 and beyond. 
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Not the css specificity guide you deserve, but the 


one you need right now. @) 
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Sa a —— — — 7 
B t ifi it Like superheroes and need a little help with Batman universe to explain the different 
a ] Cl "4 your CSS specificity issues? Then this is the rules. Simply scroll down the page, read the 
batificity.;com guide for you. The site uses a host of rules, note their strength, and then 


characters, scenarios and hardware fromthe | remember to apply them. 
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DEVRELCON 


Get yourself a seat at the biggest and 
best conferences coming your way soon 


Accessibility Club DevRelCon 


accessibility-club.org london-2018.devrel.net 

A conference aimed at web accessibility. Are you a developer? Then this conference 
There is a lineup of speakers to educate is for you. Get three days of developer 

and inform including Léonie Watson. relations, community, marketing and talks. 
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Playground (a,i) Input Effects (a,i) 
The Web Audio Playground This complex audio processing This application implements 2 This demo lets you play witha _This is sample code for 

helps developers visualize how app (shown at I/O 2012) polyphonic “analog” few common effects on the recording audio from live input 
the graph nodes In the Web Implements a 28-band vocoder synthesizer, with a classic volce audio Inputs. and downloading them as WAV 
‘Audio API work, Shown atI/O _- a "robotic voice” processor. architecture. Playable via Web files, built on Matt Diamond's 
2012. MIDI or onscreen keyboard. excellent Recorder}s 


DOWNLOAD FOR MAC 
Dark Light 


Vocoder (a,i,m) "Analog" Synth (a,m) AudioRecorder (a,i) 


Oscilloscope (a) Monosynth (a,m) wubwubwub (a,m) Pitch Detection (i) The Game of Life (m) 


Oscilloscope waveform display Example ofa monophonic Web This application implements a _—_This application performs Conway's Game of Life, on an 


for Web Audio, and pulse-width — MIDI/Web Audio synth, with no —_dual D deck, specifically monophonic autocorrelating 8x8 grid, interfacing with a 
duty cycle control on asquare UI. intended to be driven by a pitch detection in realtime. This Novation Launchpad controller 
wave. Numark MIDI controller. is suitable for a guitar tuneror via Web MIDI. 


other complex waveform 
source. 


Happy Drums (a,m) TouchPad (a,t) Volume Meter (i) SampIr (a,m) 

Quick addition of MIDI Simple template for Web Audio _Pointer/multi-touch input to Thisis a simple code example This is an in-pragress example 

controller support (using a Livid synths, with a polyphonic voice control Web Audio. Load iton a of howto properlyimplement a of how to implement a sample- 

Instruments CNTRLR) to the architecture, on-screen touch device, touch and slide _—_clip-detecting volume meter. _playback synthesizer. 

Shiny Drum Machine. keyboard (including touch), and around - to open/close the filter Eventually should support 

Web MIDI. and modify Q. looping and voice control, but 

simple code example of how to 
properly implement a clip- 
detecting volume meter. 


TemplateSynth (a,m) 


Sublime Merge 

sublimemerge.com 

Sublime Merge is from the same stable as Sublime 
Text. It provides great performance, a cross-platform 
UI toolkit, and a custom Git reading library. 


Web Audio demos 

webaudiodemos.appspot.com 

A collection of examples and demos demonstrating 
what can be done with the Web Audio API. Experiment 
and discover the power the API has to offer. 
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a range of free and open source tools to help designers and developers make their web pages nee ne ee 6 posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et 
. Engadget a ultrices volutpat. 
more accessible: (emo) 
hub bf How to Get Kids to Do Chores: Comments (29) 
‘The Verge 20 Does the Maya Method Work? 22 
-Patiw (nprorg) 
Pally Watermelon DB 
patly.org watermelondb.now.sh 


Accessibility on the web is crucial. An all-inclusive 
experience is just around the corner with the help of 
these free and open source tools. 


Watermelon DB is described as a next-gen React 
database. Build React apps that scale from hundreds 
to tens of thousands of records and stays fast. 


SPEAKERS WHYATTEND —PRACTICALINFO~ ABOUT~ —_ilJREGISTER||) 


> 


| 
| 


The world’ ‘'s largest CSS & 
conference 


‘auld coda, not wal 


November 30, 2018 
React Day Berlin sen omar 


HALFSTACK 


“ dvembs BPR France, a Sm, 


2018 


HalfStack is a one-day, single track, Ul-centric, fun JS conf in a Shoreditch pub 
Why we created HalfStack 
Code of conduct 


Half Stack 


SaraSoueidan yO 
Ssraisan award-winning freelance front-end U/UK 


DotCss 


Elika J. Etemad ¥ G 
ior spec-urter nthe C35 Working Grou 


React Day 


dotcss.io 

It’s all about CSS and boasts a host of 
speakers — including Sara Souiedan — to 
give you the lowdown on the king of styling. 


halfstackconf.com 
A one-day, single track, Ul-centric, JS conf 
based in a pub in Shoreditch. 16 speakers 


and sessions, and lots of beer (we suspect). 


reactday.berlin 

‘Build code, not walls’ is the sentiment of this 
React conference. It boasts 24 speakers in 
the heart of Berlin. 
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webkit 


Discover the must-try resources that 
will make your site a better place 


Electron 3 


electronjs.org 


zy) 


iw, 


Build cross platform desktop apps with JavaScript, HTML, and CSS 


Electron has been building cross platform 
desktop apps with JavaScript, HTML, and CSS 
for a while now. Its third incarnation has just 
been released and continues the previous 


good work. The new release includes a 
selection of changes and new features. To 
see what’s been happening with Electron 
take a visit to electronjs.org/releases. 


TOP5 


CODEPENS 


Be inpsired by this collection of smart 


and interesting codebases 
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LOV} 


YOUR NEIGHBoy 


Andy Warhol..ish 


bit.ly/2PYTKHf 

Divided into four quarters, drag from the 
middle to reveal new variations and effects. 
Add different images for more uniqueness. 


CSS Rainbow Loader 


bit.ly/2QSGBkg 

A simple repeating rainbow illustration that 
works well as colourful loader. Experiment 
with the speed and colours. 


Header 
Resources 


CONTACT US AT: webdesigner@futurenet.com | @WebDesignerMag 


@ Release Drafter 


Description Details 


Drafts your next release notes as pull requests are merged into master. Open source E! toolmantim 


and built with Probot. © Release Drafter's website 


Usage Release Drafter is provided by a third-party and is 
governed by separate terms, privacy, and support 
documentation. 

1. Install the Release Drafter GitHub App into the repositories you wish to 


automatically create releases in. Report abuse 


2. Adda .github/release-drafter.yml configuration file to each repository. 


Example 


T-Writer.js 


T-Writer.js is a native typewriter-effect library, designed to be: 


Fast 
Easy to use 
Full 


Below are a few demos, accompanied by the code you need to make it happen. These 
demos do not cover the full range of functionality built in. For a complete list of methods, 
please see the documentation on GitHub. 


Release Drafter 

bit.ly/2ONY9MR 

Looking forward to drafting your next release notes? 
This neat GitHub app drafts your next release notes as 
pull requests are merged into a master. 


T-Writer 

bit.ly/2NEOmOz 

The purpose of the T-Writer.js library is to make it fast 
and easy to create typewriter-effect text. Check the 
demos to see what’s on offer. 


Yeti Hand Pagination 

bit.ly/2pyEOEn 

Asmart and engaging way to introduce pagination. 
Pick a page number and wait for the animation to 
spring into action. 


SOFT GRASS 


Mauerwerk 

bit.ly/2Octdc8 

A neat react-spring driven masonry-like grid with 
impressive animated transitions. Click and see grid 
items transition to fullscreen and back. 


Grrrrr 
—_ 
Ripple Mouse Weird input 
bit.ly/2zoLQBy bit.ly/2ptMaJo 


Crazy coloured swirling patterns burst into 
life with water-like ripple effects as you drag 
the cursor across the pattern. 


as you type. 


Introduce inputs with interest. Watch as 
animated letters jump into the input field 


GLSL: Sinnoise1 

bit.ly/2z0oF VMN 

Use the cursor to send the spotlight across 
the screen with a soft swirl effect that goes 
in and out of focus. 
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Digital: 


Nuclear Dissent https://nucleardissent.com ‘i aan 


JAM3 & ROGUE PRODUCTIONS 


A LOOK-BACK AT ACTIVISM TO BUILD A & 


ICH IN VR ON MOBILE 


lightbox 


LightBox 


Video: Sound: 3D production: 
Rogue Productions rogueproductions.co.nz_| Grayson Matthews graysonmatthews.com | Aparato www.aparato.tv 


S PRESENT 
Bid 
=a 
=siN 


. BETTER TOMORROW 


FR 
< 


CREDITS 


lightbox 


66 Interactive 
nuclear 
documentary 
combining 
compelling 
video footage 
with VR 
panoramas 
and 
interactive 
heat map 
xrays 99 


Colours 


#IFE6AA #49909D 


#CDCOCO #OCOIAA 


Tools 


HTMLS5, SVG, GSAP., Threejs 


Fonts 


abcABC 
1234567890 
The Druk font family is 
designed by Berton Hasebe 
and used in its distinctive 
Wide, squat bold style. 


abcABC 
1234567890 


Romain BP Text by lan 
Party appears as an accent 
typeface for the site's 
Credits section. 
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lightbox 


The colors were like a sunset. 


\ 


Above 

More a hard-hitting experience 
than 'website’ as such, Nuclear 
Dissent uses video chapters to tell 
a shocking story 


Middle 

VR-ready, 360-degree scenes provide 
an immersive backdrop to the 
narrative, bringing French Polynesia 
into desktop and mobile browsers 


Bottom 

Toggling into 'X-ray' view reveals red 
heat maps boasting rollover hotspots 
that trigger audio commentaries 
explaining the impact 


LightBox 
Nuclear Dissent 


Create a random text animation 
with video background 


Use JavaScript and CSS to create an animated content overlay for a full-screen video background 


1. Initiate the HTML document 
The first step is to initiate the structure of the HTML 
document. This consists of the document container that 
stores the head and body sections. While the head 
section is used to load the external CSS and JavaScript 
resources, the body will contain the visible page content 
created in the next step. 


2. HTML content 


The foreground page content is placed inside the 
‘main’ container to deliver the advantage of easy control 
of content flow. The text element has the ‘overlay’ class 
applied so that it can be referenced by the JavaScript 
and CSS for applying the text animation. Multiple 
elements can have the animation applied by using the 
‘overlay’ class. 
<main> 
<h2 class="overlay”> 
This is a story all about how... 
</h2> 
</main> 
*x* STEP 3 HERE 


3. HTML video element 
The final part of the HTML is to define the background 
video element. Not all browsers are able to support each 
video standard, hence the need to specify different 
sources. The browser will display the first source it is able 
to support. Take note of how the video element has the 
‘autoplay’ ‘muted! and ‘loop’ attributes applied so that it 
automatically plays and repeats without sound. 
<video autoplay muted loop> 
<source src="http://techslides.com/ 
demos/sample-videos/small.webm” type="video/ 
webm” /> 
<source src="http://techslides.com/ 
demos/sample-videos/small.mp4” type="video/ 
mp4” /> 
<source src="http://techslides.com/ 
demos/sample-videos/small.ogv” type="video/ 
ORB) = 


<source src="http://techslides.com/ 
demos/sample-videos/small.3gp” type="video/3gp” 
2 
</video> 


4. CSS initiation 


Create a new file called 'styles.css The first step in this 
file is to define the properties of the 'main’ content 
container. Default settings for font and colour are 
applied for child content to inherit. Auto values are 


applied to the side margins so that child content 
appears centrally aligned 
main { 
font-family: Helvetica, sans-serif; 
color: #fff; 
padding: 2em; 
width: 75%; 
min-height: 10@vh; 
margin: @ auto @ auto; } 


5. Video element styling 
The background element requires specific styling in 
order for the effect to work. Firstly, fixed positioning is 
important to guarantee that it stays in the same position 
if the user scrolls the page. Secondly, it must use a 
negative z-index that will guarantee its position 
underneath the main page content. Transform and size 
are also used to set the element's size and location to 
cover the full-page window. 
video { 
position: fixed; 
top: 50%; 
left: 50%; 
min-width: 100%; 
min-height: 100%; 
z-index: -9999; 
transform: translateX(-50%) 
translateY (-50%) ; 
background: #000; } 


6. Overlay children 
The ‘overlay’ element will be manipulated by JavaScript to 
split each letter of its text content to be wrapped by a 
span tag. This allows individual letters to be animated via 
CSS. Firstly, the default settings for the ‘span’ letters are 
defined to have relative positioning, invisible opacity and 
an applied ‘animateOverlay' animation. Secondly, a delay 
to their animation is applied based on their child 
positioning. 
-overlay span{ 
position: relative; 
opacity: Q; 
top: lem; 
animation: animateOverlay 1s ease-in- 
out forwards; 
ay 
.overlay span:nth-child(4n) { animation-delay: 
Oss} 
.overlay span:nth-child(4n+1) { animation- 
delay: 1s; } 
-overlay span:nth-child(4n+3) { animation- 


delay: 2s; } 
.overlay span:nth-child(4n+2) { animation- 
delay: 3s; } 


7. Overlay animation 
The animation applied to each span element consists of 
just one frame that the elements will animate towards. 
This sets their opacity to become fully visible, along with 
their vertical positioning to animate towards their default 
text flow position. Take note of how step 6 sets each span 
element to be pushed down by lem. 

@keyframes animateOverlay { 


tome 
opacity: 1; 
top: Q; 
+} 
8. Overlay search 


Create a new file called 'codejs. This first step will 
search for all of the elements using the ‘overlay’ class - of 
which a ‘for’ loop is used to apply the code in step 8. 
These elements are not available until after the page 
has loaded, so they need to be placed inside an event 
listener in the browser window that is triggered on its 
load completion. 
window. addEventListener("load", function(){ 
var nodes = document. 
querySelectorAl1(". overlay"); 
for(var i=; i<nodes.length; it++){ 
*** STEP 9 HERE 


pe 


9. Text manipulation 

Each element found in step 8 needs to have its HTML 
contents redefined to have each letter inside a span 
element. This is achieved by reading its plain text using 
‘innerText! and then using a second ‘for’ loop to 
individually add each letter to the new version of the 
HTML - complete within its span tag. After each letter has 
been read, the parent node's 'innerHTML is updated with 
the new HTML. 

var words = nodes[i].innerText; 


var html = ""; 

for(var i2=0; i2<words.length; i2++){ 
if(words[i2] == " ")html += 

words[i2]; 


else html += 
"<span>"+words[i2]+”</span>”" 
i 
nodes[i].innerHTML = html; 


lightbox 19 


Marie Morelle | Illustratrice www.marie-morelle.com 
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Designer: 
Vincent Saisset hitps://vincentsaisset.com 
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Scarborough Fair ° 
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lightbox 


LightBox 


66 Paris- 
based 
Illustrator 
and Art 
Director 
Marie 
Morelle 
serves up a 
whimsical 
and clean 
sketchbook 
site of 
collected 
works 99 


Colours 


#FEFEFF 9 #P5E5E5 


#E96547 #EFBE41 


Tools 


WordPress, Typekit, 
GSAP., jQuery 


Fonts 


abcABC 
1234567890 


The Raleway font, initially 
designed by Matt 
McInerney, is a sans-serif 
typeface used here via 
Typekit but also available 
on Google Fonts. 


abcABC 
1234567890 


Aside from the Regular 
weighting, Raleway is also 
used in Extra-Light 
typeface for the <h2> 
header links. 
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A custom mouse pointer suggests 
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Fair within the About section 
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Create an interactive 


LightBox 
Marie Morelle | Illustratrice 


navigation image control 


Make empty space more appealing with this eye-catching animated effect 


1. Page initiation 
The first step of creating the webpage is the definition of 
the HTML document. This consists of HTML to define the 
document container, which in turn stores the head and 
body sections. While the head section is used to load 
external JavaScript and CSS resources, the body section 
is used to contain the visible HTML content created in 
step 2. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Navigation Imagery</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css" /> 

<script type="text/javascript” src="code. 

js 2s/ Script 

</head> 

<body> 

*** STEP 2 HERE 

</body> 

</html> 


2. HTML content 


The navigation content is kept to a minimum, with a 
specific focus on defining the navigation content. This 
consists of the navigation container and its associated 
links. Each link has a'title’ attribute that will be used as a 
reference to influence visual styling in later steps, with the 
help of JavaScript and CSS. 
<nav id="mainNav”> 
<a href="#" title="Page 1”>Page 1</a> 
<a href="#" title="Page 2”>Page 2</a> 
<a href="#" title="Page 3”>Page 3</a> 
</nav> 


3. Event management 
Create a new file called 'codejs: Upon completion of the 
page loading, this code will search for all of the 'a’ links 
inside the 'mainNavigation’ from step 2. A ‘for’ loop is used 
to apply a ‘mouseover’ event listener to each item found. 
This event listener will set an attribute called 'datatheme’ 
on the parent 'mainNavigation’ container, which is to be 
set as the title attribute of the 'mouseover' link. 
window. addEventListener("load”, function(){ 
var nodes = document. 
querySelectorAll("#mainNav a”); 
for(var i=; i<nodes.length; i++){ 
nodes[i]. 
addEventListener("mouseover", function(){ 
this.parentNode. 
setAttribute("data-theme”, this. 


getAttribute("title”)); 
3 


Di 
4. CSS initiation 


Create a new file called 'styles.css' This step initiates the 
CSS with the general page styling. Specifically, all 
elements are set to use 'border-box' for including padding 
as part of width calculations. The page is set to have no 
visible border spacing through margin and padding, as 
well as the default font for content to inherit. 
*{ box-sizing: border-box; } 
html , body{ 
display: block; 
margin: Q; 
padding: Q; 
font-family: Helvetica, sans-serif; 
color: #000; 
D; 


5. Navigation container 
The navigation container is set to use fixed positioning so 
that it always remains visible. Its width is set to half of the 
browser window, with settings to present any 
background image to cover 40% of the right side. 
#mainNav{ 
position: fixed; 
display: block; 
width: 5@ww; 
transition: background 1s; 
background-repeat: no-repeat; 
background-position: right center; 
background-size: 40%; 


6. Navigation items 
Each item inside the navigation container is set to display 
across 50% of the navigation - leaving space for its 
associated item. Each item is set with a border, padding 
and margin to appear distinct from each other. 
Alternative background and font colours are used when 
items are being hovered with the mouse pointer. 
#mainNav a{ 

display: block; 

width: 50%; 

color: #00Q; 

padding: lem; 

margin-top: .5em; 

border: 1px solid; 
a 
#mainNav a:hover{ 

background: rgba(@,0,@,.5); 

color: #fff; } 


7. Image definition 
The final step is to associate the images to display for 
each of the navigation links. With the JavaScript from 
step 3 setting the data-theme’ attribute of the parent 
container to match the title of the latest hovered link, this 
step is used to specify the background image for each 
value that ‘'data-theme’ could be set to. 
#mainNav[data-theme="Page 1” ]{ 
background-image: url(image1. jpg) ; 
i 
#mainNav[data-theme="Page 2” ]{ 
background-image: url(image2. jpg); 
3 
#mainNav[data-theme="Page 3” ]{ 


background-image: 


url(image3. jpg) ; 


a; } 
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Web Graphics Experiments experiments.p5aholic.me 
Web Graphics Geperimenl 


Designer: 
Keita Yamada p5aholic.me 
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LightBox 


66 23-year- 
old Japanese 
developer 
Keita 
Yamada’s 
collection of 
graphic art 
experiments 
in web 
technologies, 
with new 
works added 
weekly 99 


Colours 


#101010 #OO3BFF 


#F32D8E 


#CEFOEF 


Tools 


WebGL, GSAP. 
GLSL, Threejs 


Fonts 


aboAGC 
LGHOASH 


Moonstruck font by Make 
Media type foundry is used 
to provide the distinctive 
hanawritten typeface on 
the title home link. 


abcABC 
1234567890 
abcABC 
1234567890 


Anteb font designed by 
Chatnarong Jingsuphatada 
for Typesketchbook is 
employed in Light and 
Regular typefaces. 
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Create a fading previous/ 
next content navigation 


Use the HTML article element to generate an animated previous/next content navigation feature 


1. Initiate the document 
The first step is to initiate the web page as an HTML 
document. This consists of defining the HTML container, 
which stores the <head> and <body> sections. While the 
<head> section references the external CSS and 
JavaScript resources, it is the <body> section which 
stores the page content — created in Step 2. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Screen Nav</title> 

<link rel="stylesheet” type="text/css” 

media="screen” href="styles.css"/> 

<script src="code.js” type="text/ 

javascript"></script> 

</head> 

<body> 

*%*k STEP 2 HERE 

</body> 

</html> 


2. Page content 
The page content consists of a <main> container that is 
used to store the primary page content, followed by two 
elements that will be used as navigation controls. Each 
article has a unique ID that can be used by CSS and 
JavaScript to present the individual content sections 
when they are required. 
<main> 
<article id="p1"> 
<h1>Section 1</h1> 
</article> 
<article id="p2"> 
<h1>Section 2</h1> 
</article> 
<article id="p3"> 
<h1>Section 3</h1> 
</article> 
</main> 
<span data-nav="left">8&lt ; </span> 
<span data-nav="right">&gt ; </span> 


3. JavaScript: 

Navigation function 

Create a new file called ‘code js. The first part of this 
JavaScript code defines the ‘nav’ function that will be 
called in response to interactions with the navigation 
controls. Its parameter accepts details about the event, 
including a reference to the navigation control. The index 
value is calculated and used to update the window URL 
using the associated article ID — defined in Step 4. 
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function nav(e){ 

e.preventDefault(); 

if(e. target. getAttribute("data-nav”) 
== "left" && nav.index > Q){ 


nav. index--; 
jJelse if(e.target.getAttribute("data- 
nav”) == "right”){ 
if(nav.index < nav.nodes. 
length-1){ 
nav.indext++; 
3 
i 


window. location.href = "#"+nav. 
nodes[nav. index]. getAttribute("id”) ; 
i 
nav.index = Q; 
nav.max = Q; 


4. JavaScript: Load setup 

The JavaScript code must wait for the page to finish 
loading before it can reference the page content. We 
achieve this by placing the initiation code inside a ‘load’ 
event listener applied to the window. The ‘nav’ function is 


provided with a list of articles inside the <main> container, 


as well as the ‘nav’ function being applied in response to 
‘click’ events on the navigation controls. 
window. addEventListener("load”, function (){ 
var nodes = document. 
querySelectorAl11("[data-nav]"”) ; 
nav.nodes = document. 


querySelectorAll("main > article”); 


nodes[@].addEventListener("click", nav); 
nodes[1].addEventListener("click", nav); 
y; 
5. CSS articles 


Create a new file called ‘styles.css. This step defines the 
default presentation for the articles inside the main 
container. These elements are set to be placed in the 
top-left corner of the browser window and to cover the 
full page. The visibility are hidden using ‘opacity’ and 
‘Zindex’, with a transition on their opacity set to animate 
them into view when required. 
main > article{ 

position: absolute; 

display: block; 

height: 100%; 

width: 100%; 

top: Q; 

left: Q; 

opacity: Q; 


transition: opacity 1s; 


overflow: scroll; 
z-index: Q; 
color: #fff; } 
6. Article activation 
The ‘nav’ function defined in Step 3 will trigger changes in 
the page URI that references individual articles using their 
ID. CSS detects this using the ‘target’ selector, in which 
this step changes their default ‘z-index’ and ‘opacity’ to 
become visible. This step also sets individual background 
colours for the articles using their ID references. 
Main article: target{ 
z-index: 2; 
opacity: 1; 
3 
main article[data-previous]{ 
z-index: 1; 
3 
#p1{ background: red; } 
#p2{ background: green; } 
#p3{ background: blue; } 


7. Navigation controls 
The navigation controls are identified using their 
‘data-nav’ attribute. They share a set of common 
presentation rules such as fixed positioning, vertical 
location and ‘z-index’. These are important to remain 
visible in the same location above the page content 
regardless of scroll location. Unique horizontal styles are 
applied using the value of their ‘data-nav’ attribute. 

[data-nav]{ 

position: fixed; 


top: 45vh; 

font-size: 3em; 

width: lem; 

color: #fff; 

z-index: 9999; 

background: rgba(@,0,@, .5); 


y 
[data-nav="left"]{ left: @; } 
[data-nav="right"]{ right: @; } 
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design diary 


IDEA OF ‘BRAND’ IS MORE CLOSELY ENTWINED 

with and intrinsically linked to an online presence 
than ever. Big, established and long-trusted 
household names feel a responsibility to push 
boundaries and exert their market prowess in the 
digital space, while for others it can really open the 
first window into consumer consciousness. Creative 
agencies have, of course, had to vastly evolve their 
remit to accommodate this seismic promotional 
shift and deliver ‘out of the box’ branding services 
to clients. Operating almost off the golden beaches 
of Fort Lauderdale, Florida, is one such award- 
winning agency that applies ‘fine-arts’ sensibilities 
to the seamless blend of brand with design. Helium 
Creative create dynamic, personified, branded 
experiences for clientele who value an in-depth 
collaborative approach around the delivery of 
‘unconventional solutions’ for impactful brand 
experiences. Typically associated with luxury real 
estate web projects, things were to get decidedly 
more diverse when Fiji Pop approached them with a 
delicious dilemma. Keen to introduce the US market 


| N THE SCIENCE OF MODERN MARKETING, THE 


to their frozen popsicles, or lollipops to British 
tongues, these five young Bolivian entrepreneurs 
were seeking a complete brand overhaul including 

a new name. Taking direct inspiration from the 
flavours, sensations, colours, ingredients, and story 
behind the products, the Helium gang set off to 
create a solution full of vibrancy and playfulness. 
Rechristening them ‘drip pop’ instead, they would go 
on to develop new brand messaging, identity, pop 
packaging, supermarket box packaging, a splash 
page and, indeed, a full website. “They were looking 
for a creative studio that saw the brand as a piece of 
art,” Helium begins. “Once we had the brand 
elements we needed to work with, the focus became 
building a unique online experience. With this in 
mind, we wanted to push the play on the different 
layers each flavour has, creating this dimensional 
playground and interaction with every user. We kept 
the design itself very minimal, so the focus 
remained on the message and the playful product.” 
Allowing the project brief to bring out the kid in 
each of them, Helium would be uniquely placed to 
appreciate drip pop’s appeal and spread the love. 


MAPPING 
THINGS OUT 


“Our process typically starts 
off with a basic sitemap for any 
web development project,” 
begins Experience Designer 
Kelly Gedvilas when quizzed 
on the extent of client 
communications. “We gather 
all the necessities from the 
client; whether it’s things they 
wish to see on their site, 
product shots or additional 
imagery. This ultimately helps 
us accommodate design for 
everything needed initially, as 
well as for the future of the 
brand. For example, while 
planning the design for the 
product page that showcases 
all the flavours of pops, we 
needed to create something 
that would make adding more 
flavours or categories easy, 
while also ensuring the user 
was able to interact with ease 
and engagement.” With this 
initial sitemap established, 
Helium will design two main 
pages from the site as a 
working illustration. These are 
then shared with the client to 
stimulate deeper brainstorming 
and heighten the sense of 
collaboration, giving a client 
like drip pop enough 
confidence to let the team 
plough ahead. “We bounce 
different ideas that can be 
done through development to 
really elevate their site and 
based on budget we can play 
around with ideas that really 
push the design, like the value 
of adding video content or 
additional pages we see fit. 
When this stage is approved, 
we then move forward with 
completing the remainder 
of the design. There’s 
communication when we 
finalise the flat design, but as 
for how everything comes 
together regarding animation 
and development, we are 
fortunate enough to have 
clients who trust us with 
that process and let us 
run full steam.” 
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Artful branding 

“Dessert is always fun, especially when it’s a frozen 
dessert meant to be enjoyed on hot summer days,” 
the team laughs. “For drip pop we had the 
opportunity to play with food both in real life and 
on the computer.” Hardly a bad way to make a living, 
most would agree wholeheartedly. Plus that 
enthusiasm for the consumption of a food-based 
client product would, of course, reap dividends 
within the initial branding efforts. “From an actual 
melting lavapop we created a vector illustration 
used to further the drip identity. Hand-drawn 
patterns that portray ingredients are added to 
photographs of rich textures to represent the 
vibrant colours found within the lavapops 
themselves and help make the packaging unique 
pieces of art.” This critical identity work needed to 
happen before even conceptualizing how the web 
side of the project could reflect it. The team knew 
that understanding the new brand inside and out 
was crucial, not least so they could be aware of all 
the brand elements to use in the design process. 
“To get started, we had this brand, all of these 
really cool textural design elements, patterns, 
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and backgrounds, etc., and so the question became 
what can we do to make all of this content come 
alive while not becoming this crazy overload of 
design? Quickly the answer became all about 
creating that magical balance of clean, 
typographical design that the brand entails and 
contrasting it with organic and playful artistry.” 


Boundary pushing 

In this respect, Helium had freer rein to design 
something without the normal boundaries their 
normal commissions dictated. That freedom can, of 
course, be a blessing and a curse in some respects 
and gave the designers some thinking to do over 
where they couldn’t perhaps tread. “As much as we 
want free rein with anything, we always go back to 
needing those limits,” laughs Experience Designer 
Kelly Gedvilas. “With this in mind and from an 
experience standpoint, | knew | wanted to showcase 
all these layers into moving parts and what would 
elevate these parts by how the user would interact 
with them. | suppose when it came to limits, | 
needed to create something that would be easily 
understood by an older demographic, while still 
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appealing to the younger millennial and what would 
be attractive to both.” This formative direction was, 
guided by some sign-off approval from the client, 
with communications concentrated most at each 
end of the process. Helium tends to draw up a 
basic sitemap that signposts all the content assets 
required, which the client then green-lights before 
proceeding. “Once the client approves the content 
of the sitemap, we jump into designing two main 
pages of the site,” Kelly continues. “The purpose 

of this is to show them our initial ideas without 
designing everything up front. We share these two 
main pages to open up collaboration between the 
client and designer. This enables everyone to 
discuss ideas and initiate conversation of the 
thought process behind the design, allowing the 
client to feel part of their own project.” 


Drool-worthy direction 

From the very beginning, Helium was excited by the 
project’s potential for doing something fresh. Diving 
into a marketplace markedly different from their 
usual work, they sensed an opportunity to buck a 
few trends. Early market research yielded few 


competitors in drip pop’s space that had any leading 
concept, design or story within the industry. This 
would enable them to recognise what other 
companies were lacking, chiefly being any 
personality, life or over-arching concept. 
“Fortunately, we had done the initial brand 
development for drip pop so we were able to really 
tell a visual story with some great play and 
exploration. All of this background process set the 
stage for us to seamlessly create a website that 
mirrored the same energy as the brand foundation. 
Paint splatter, hand-drawing, custom artwork, quirky 
icons, are just a few of the brand elements that gave 
us the flexibility to concept a really engaging 
website.” For Kelly, this insider brand development 
knowledge could be coupled with the wider market 
observations and kept in mind while foraging for 
design inspiration. This ‘fun stuff’ would include a 
broad sweep of all sorts of on and offline design 
sources, grabbing cool references like a creative 
magpie. “No matter the industry, no matter the 
platform, this is where | dive in the deep end of 
Pinterest feeds, Behance mini GIFs and trending sites 
on CSS Design Awards. | usually get my interaction 
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TALKING 
THE WALK 


“| think the biggest challenge 
during the process of 
development with this project 
was translating what was in my 
head for all the different layers 
in the design,” laughs a 
reflective Kelly Gedvilas. “Then 
describing how | wanted them 
to interact with each other, 
which if you ask any designer 
to translate what’s in their head 
into developer lingo and you'll 
often get something totally 
different.” It’s a valid point 
honestly made, with that 
bridging of the design and 
development divide proving 
problematic for most digital 
projects. Thankfully for the 
production of drippop.com, 
the team wasn’t building a 
sprawling, complex, critical 
web app that would demand 
excessive coding. The 
development phase was much 
more about robustly bringing 
life to the frontend design 
elements, while ensuring 
consistency of performance 
across devices. “With that, | 
often thought, ‘OK, how can 
| make this easier for both 
parties to understand and learn 
from, what exactly can’t be 
done from a developer 
standpoint and what can we 
come up with instead so that 
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user experience is still just as 
impactful?’ The key is keeping 

the balance of what cannot 

be achieved through coding 
roadblocks and supplementing 

what will be the biggest and 

coolest impact for 
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ideas for a single site easily from a compiled list of 
over ten sites, liking bits and pieces from each one.” 
Armed then with enough visual motivation, the 
challenge becomes focusing it to give drip pop’s 
online presence enough distinction from the 
others. In a saturated market of sumptuous 

frozen treats, how could Helium’s inspiration 

and branding work give a drool-worthy product 

a suitably mouth-watering website? 


Practical challenges 

“For websites, | usually sketch everything on paper 
beforehand,” Gedvilas enthuses when asked about 
the visual development phase. “Everything. 
Navigation systems, footers, pop-ups, sort of ina 
Crazy-8’s fashion just to get all of my ideas out of my 
head. Somehow, in some way, this process helps the 
transition onto the computer so much easier! | can 
quickly reiterate from my sketches to see what 
translates the best and just run with it.” This project 
was also unique, being tied so tightly with a cohesive 
rebranding initiative that included product 
packaging. The graphics for all of the content were 
originally crafted for this purpose, while the team 
still wanted new renditions of the patterns to be 
implemented on the website. This would ensure that 
each area the customer sees, whether it’s in a drip 
pop location, purchasing a box of pops, or visiting a 
kiosk, is a completely unique experience. “There was 
a lot of experimentation with the layering of each 
pattern and flavour because sometimes it worked 
and others simply didn’t. All in all, however, this was 
a fun project to play with all of the brand elements 
with.” Once this frontend design work is completed 
and approved by all the parties involved, Helium 
passes efforts over to its development team. Kelly 
concedes that this part of the process often takes 
the most time, typically to ensure everything is fully 
functioning properly on all devices, browsers, and 
responsive formats. “A lot of the time, we run into 
complications of what works on what device, and 

if there are issues, we need to come up with 
alternatives that won’t compromise the user’s 
experience with the site. The ‘trial and error’ period 
can then entail issues being fixed on one platform 
and then a problem where there was none before, so 
it’s all about puzzle-piecing and problem-solving.” 


Launch phase licked 

Fixing those issues is, of course, imperative before 
contemplating handover and launch, with the client 
enjoying a final ‘sneaky peek’ before that button gets 
pressed. “They don’t receive the test link until the 
project acts and looks as a live functioning site. They 
test the website and once the site is approved as 
good to go from their perspective, it’s just a matter 
of going live!” Naturally, a conscientious agency like 
Helium wants to set its clients up for success here, 
handling all of the backend development and setup 
this demands. This live launch and handover process 
is therefore pretty seamless to say the least, usually 
depending more on the circumstance the client is in. 
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Site Highlight 


Helium Creative’s Experience 
Designer Kelly Gedvilas reveals 
a particular project achievement 
that represents a source of 
pride for the team after all 
their hard work. 


“| think the standout feature for this 
project is the scrolling interactions. 
| think it makes all the pages and 
content flow cohesively. The shifts 
between parts on a single page are 
fun to go back and forth on, 
although | think that was the 
most challenging portion of the 
development phase. Getting those 
exact took quite a bit of time but 
totally worth it in the end!” 


“For instance, if this is a client for a rebrand, we 
typically do a necessary introduction before launch 
and the same goes for a client that is relaunching 
under a new name. For drip pop, it was blank canvas 
and just a matter of putting the brand out there for 
recognition!” Thankfully, that attention has been a 
two-way street, with Helium enjoying an equally 
encouraging helping of recognition for the live site 
as the client. Honours including CSS Design Awards 
Website of the Day, as well as Best Innovation, Best 
UI Design, and Best UX Design prizes for the website, 
have been joined by numerous brand and packaging 
accolades. Such success vindicates the project’s 
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focus on this being the start of a lasting working 
relationship, with ongoing maintenance of web 
projects something Helium’s clients can expect. In 
drip pop’s case, this constitutes additional updates 
such as adding new flavours, stores and locations, 
fixing any possible bugs, and keeping the site up to 
date. “Right now, this company is still super-new and 
they are finalising a lot of the framework to flush out 
the rest of the brand to the world,” Kelly concludes. 
“Drip pop has plans to sell in major supermarkets 
and opening kiosks in South Florida, but for the time 
being the website itself is serving as its marketing 
tool for creating initial brand awareness.” 
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Who Futurice 


What Design, lean service 
creation, consulting, 
programming, training, and agile 
software development 


Where Headquarters: Annankatu 
34 B, 00100 Helsinki, Finland 


Web futurice.com 
Key Clients 
Moneycorp 
Plan International 
Ford 
Finnair 


E.ON 


Defining the 


| a 


uturice was founded in 2000 in Helsinki, 
- Finland by Tuomas Syrjanen, Hanno 
Nevanlinna, Mikko Viikari and Markku 
Taulamo while all four were still pursuing 
their academic degrees at what was then 
known as Helsinki University of Technology 
(currently Aalto University). 

The founders majored in a variety of 
disciplines: computer science, electrical 
engineering, chemical engineering and 
shipbuilding. Three of them — Syrjanen, 
Nevanlinna and Viikari — are still with the 
company, and all four remain the company’s 
majority shareholders. 

Futurice initially focused on solutions and 
software development for early mobile 
platforms in the pre-smartphone era, and 


Future 


The digital environments we all live in today 
are in constant flux. Futurice crafts these 
~.. experiences based on an innate 
understanding of not just the technology, 
- but how the digital space impacts people, 
and how we can make it work for everyone 
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among other things, created Finland’s largest 
photo-sharing service, Kuvaboxi, in the early 
700s which was eventually sold to MTV3, a 
Finnish media company. Futurice has since 
evolved into an international digital 
consultancy that combines tech, design and 
advisory, with 500 professionals working in 
seven offices across five countries. 

But that’s just the business side of things. The 
founders also wanted to set up a company with 
a new set of values — transparency, trust and 
empowerment. And that’s the part that stuck 
the most — the product and market fit may vary 
slightly between countries, but the culture is 
what helps Futurice stand out. 

The founders like all new business startups 
needed to find a name for their new enterprise. 
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John Oswald, Global Principal of the Advisory 
Team explains their approach: “Futurice 
registered the futurice.com domain name 
around the same time as the company was 
founded, in August 2000. But that’s the simple 
part. The name came first — it signifies the 
‘Future’ of ‘ICE’: Information, Communications 
and Entertainment. It’s led to some internal 
in-jokes along the way. Pronunciation 

varies from country-to-country, but most 
settle on FuturlSS.” 

A presence online is of course vital for all 
agencies. However, as John continues, for 
Futurice, their website is much more: “Our 
site is a big public statement,” he states. 
“Given our focus on trust, transparency 
and empowerment, though it’s tricky 
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getting our public-facing website exactly right 
for everyone! 

“We recently went live with a new articulation 
of the company and our values, and we’re 
pretty proud of it, although it was quite a 
journey getting there. In a company like ours 
where everyone’s view matters, and is taken 
seriously, it’s a tricky thing to summarise 
ourselves in a single website. But it’s super- 
important to us to present the best of who we 
are and what we do, as well as our culture. 

“The primary objectives of the site are to be 
interesting and insightful to our clients, attract 
new talent to the teams, and to give our people 
the platform to blog, connect and be noticed. It 
takes quite a bit of looking after — between our 
marketing team of seven, and a blogging team 
of 500, it’s almost impossible to say how much 
time and effort goes in — but it’s worth it!” 

As the stated goals of Futurice are 
transparency, trust and empowerment, the 
work that the company has produced over the 
last 18 years has been diverse to say the least. 
However, Web Designer asked John if there 
are accounts that speak directly to the ethos 
of the company? 

“We're particularly proud of the work we 
recently did with Finavia, Helsinki-Vantaa 
Airport’s operating body, and Finland’s flag 
carrier Finnair, in designing a prototype for the 
world’s first face recognition check-in desk 
system,” John explained. “The test run was 
conducted over a period of three weeks in May, 
to follow up on a preliminary trial last year. 

“A thousand frequent flyers were invited to 
take part, with participants using a trial app to 
send their face profiles to the test software 


platform. The travellers were then forwarded 
to a designated check-in desk containing the 
facial recognition tech, which turns facial 
images into untraceable biometrics IDs, 
enabling Finavia to identify registered 
passengers on-the-go without having to 
store images.” 

John concludes: “The test will also provide 
useful information on the use of this solution 
for environments with large customer flows 
and tight security needs. This project 
represents Futurice best because it was a 
combination of all three of our passions: finding 
the right solution that works for people in their 
various contexts (the best of design); exploring 
emerging applications of technology (the best 
of tech); and establishing a business model that 
works (the best of our advisory people). 
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day, utUrice comes together as a team to sifare learnings 
date each other on their week. Here, Software Developer) 
Minr | Niemi is talking about ways in which Futuric@ updated the 


wording of their tech job ads to be more inclusive 


“It also shows how much we rely on our 
peoples’ passions when developing our 
business. Biometrics — and facial recognition 
in particular — is an area that our Head of 
Innovation, Tugberk Duman, is really into and 
started developing as a business independently 
and with minimal investment, which was a very 
smart move. Things that percolate up from our 
organisation are frequently awesome and we 
really rely on these signals in the development 
of both our business and culture.” 

The steps that agencies take to attract clients 
can be manifold. As a multi-country business, 
for Futurice a clear focus on the sectors they 
want to work within is a core driver, as John 
explains: “We're very well known in Finland 
with a lot of clients, so there’s a healthy 
ongoing dialogue, which means that 
business flows in both directions. 

“In other countries — particularly in Germany 
and the UK — we're constantly pitching for 
work and networking with clients and potential 
clients. But we’re gradually getting better and 
better known wherever we work. We also like 
to have a point of view on what’s happening in 
the world — hence the importance of blogging 
and having a voice.” 

In addition, John says: “We encourage 
literally everyone in our company to have 
that voice. And we're all empowered to go out 
and meet people, build trust and help solve 
problems. Finally, a lot of our work comes to 
us from our open-source efforts. We’ve 
designed open source ways of working, like 
Lean Service Creation, which generates a lot 
of buzz. Slightly hilariously a client recently 
asked us if we could demonstrate proficiency 


in Lean Service Creation. Naturally we could, 
given we designed the toolset.” 

The projects that an agency takes on need to 
fulfil the practical needs of the business, but 
they also need to feed the imaginations of 
everyone working with the client. Balancing 
business and creative needs is constant across 
Futurice. “As a relatively small business, we 
don’t always have the luxury of picking and 
choosing, but we tend to build relationships 
with clients where our values align very nicely,” 
says John. “We draw the line occasionally with 
clients who, for example, specialise in defence 
(and we have a healthy internal debate about it, 
too). We're basically here to help our clients, 
though, so we’re more than happy to do 
something small like a bit of training or maybe 
a workshop, all the way through to getting 
involved with longer-term initiatives.” 

Approaching each new project means 
assembling the right talents to deliver on the 
client’s brief. John explains their approach: 
“The whole ethos of the company is multi- 
disciplinary teams coming together with our 
clients to co-create a way to solve a business > 
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We recently went live with a new articulation of the 
company and our values, and were pretty proud of it, 
although it was quite a journey getting there. In a company 
like Ours where everyone's view matters, and is taken 
seriously, it’s a tricky thing to summarise ourselves in a single 
website. But it’s superimportant to us to present the best of 
who we are and what we do, as well as our culture 


Using biometric IDs begins Finnair, Finavia and Futurice experimented 
with a facial image that is with ground-breaking technology which 
then used to facilitate the has the potential to rejuvenate the entire 
passenger’s hands-free departure experience. 

check-in. “§ 
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key aim of the project finnair.com and finavia.fi/en 
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In an industry-first attempt to enhance the 
customer experience using biometrics, Futurice 
worked with Finnair and Finavia — Helsinki 
Airport’s operating body — to build and test a 
facial recognition system for ‘hands free’ check-in. 

The team used feature-based facial recognition 
technology, which turns facial images into 
untraceable biometric IDs, enabling the system 
to identify registered passengers on-the-go 
without having to store their images. 

In a competitive environment like aviation, safe 
travelling, comfortable aircraft and good onboard 
service are taken for granted by the passengers. To 
gain a competitive advantage, a service provider 
must further enhance the customer experience in 
unprecedented ways, through innovative 
interactions and data security. 

The system was used for a time-boxed pilot 
project at Helsinki Airport. By testing the new 
system with real passengers, the team proved that 
it has the potential to rejuvenate the entire 
departure experience and provided information on 
the use of this solution for other environments 
with large customer flows and tight security needs. 

Also, the pilot project positively impacts the 
brand image of Finnair and Finavia, helping them 
to be perceived as customer experience champions 
and pioneers of new technologies. 
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Nokian Tyres 


nokiantyres.com/snapskan 


Worn tyres end lives — Nokian 
Tyres and Vianor wanted to 
change that. The hypothesis was 
that improving drivers’ awareness 
of the condition of their tyres, 
and their impact on the safety of 
their loved ones, should decrease 
road accidents, and increase 
brand awareness and tyre sales. 
Through research, validation 
and testing, Futurice designed an 
loT service — SnapSkan — that 
would automatically measure the 
condition of the tyres, then offer 
the driver the option of accessing 
the data, while supplying 
information about the impact of 


tyre condition on passenger 
safety and the option to purchase 
new tyres. Snapskan uses 3D 
scanning technology, machine 
vision and the newest web 
technologies to measure tread 
depth and tyre safety. A busy 
Q-Park garage in Helsinki served 
as the staging ground for the 
pilot. The results obtained proved 
that people are willing to buy 
tyres in conjunction with the 
SnapSkan measurement. 
SnapSkan also provided Nokian 


Tyres with a new channel for __ SnapSkan uses the latest web 


sales outside the market served i ‘technologies to monitor tyre tread 
by tyre storage facilities. 


depth and safety 


© Adobe software is still used, but we Use mostly the newer 
generation UX/UI focused tools such as Sketch, InVision, 
Zeplin, Principle, Sigma, Proto.io, to name a few. We try to 
complement the design work with useful collaboration tools 
such as Abstract or RealtimeBoard. We also have quite an 
extensive ‘physical toolkit that we always make use of in 
projects — anything from the Lean Service Creation 
canvases to the lol Service Kit — all of which we 

have shared under open licenses ” 


Mikko Heikela 
Technology Director 
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problem. It’s hard to pin down exactly what the 
flow or the process is, as it will adapt and shift, 
but you could characterise it as designers, 
technologists and advisors working ina 

small team from initial concept through to 
detailed design, build and integration, then 
through to launch. 

“Not every project follows this pattern, of 
course: some will start straight from helping a 
team build a new feature or refactor an existing 
code base; others will start from the initial 
concept and simply provide recommendations. 
But all of our projects start with a relationship 
with a client who needs our help, and however 
small or large, we'll do that. Typically, our ethos 
rubs off and clients want to see more.” 

The diverse nature of the work Futurice 
completes for its clients means not only 
choosing the right people for the team, but also 
the right tools, which can be diverse. Mikko 
Heikela, Technology Director outlined their 
current toolset: “When it comes to software 
choices, we want to empower teams and 
individuals. Every designer has the freedom to 
choose the tools they feel are the best choice 
for the project, as long as this doesn’t affect 
team collaboration in a negative way. 

Mikko continues: “Adobe software is still 
used, but we mostly use the newer generation 
UX/UI focused tools such as Sketch, InVision, 
Zeplin, Principle, Sigma, Proto.io, to name a few. 
We try to complement the design work with 
useful collaboration tools such as Abstract or 
RealtimeBoard. We also have quite an extensive 
‘physical’ toolkit that we always make use of in 
projects — anything from the Lean Service 
Creation canvases to the loT Service Kit — all 
of which we have shared under open licenses.” 

As technologies have evolved and diversified, 
how agencies create the assets and 
environments for their clients has also radically 
changed. “Growing browser support has made 
at least some CSS3 and HTML5 mainstream,” 
Mikko comments. “While new technologies 
are applied to websites and pages without a 
lot of interactivity, most of our design and 
build projects focus on more complex 
web applications. 

“In this area, React has been a very strong 
framework for years now, but our teams are 
also constantly looking into alternatives from 
the likes of VUE to more radical options like 
using Elm or even ReasonML. Complex web 
applications nowadays are rarely built with 
jQuery and JavaScript without higher level 
libraries. Within the React ecosystem, we 
have found styled-components to be a 
pleasant way to structure styles and keep 
the implementation of a design system or 
a pattern library manageable. 

“Other technologies that are getting more 
and more interesting include the building 


“Our teams are also constantly 
looking into alternatives from 
the likes of VUE” 


blocks of Progressive Web Apps, such as 
service workers and web app manifests. 

For complex applications, using a strongly- 
typed language is becoming the most popular 
approach, and TypeScript is a strong choice 
right now. Longer term, WebAssembly holds 
the promise of allowing a significantly broader 
variety of programming languages to target 
the web browser.” 

Today the phrase ‘mobile first’ seems very 
overused. For Futurice, the platform will always 
come second to the needs of the target users, 
as Mikko explains: “Design always starts from 
the user and their needs, and the context in 
which we expect the app or service to be used. 
For simple services it is easier to find a 
common design approach that works for 
mobile, tablet and desktop use. Whereas, for 
more complex services it becomes increasingly 
important to make use of the capabilities of 
each platform in an optimal way. 

“The delivery channel of the service or app 
matters in that it sets expectations. Mobile 
users don’t expect every web page to follow 
their platform’s guidelines and idioms, but the 
situation is different for apps installed from 
app stores, which has often been a problem 
for hybrid technologies. It will be interesting 
to see how these expectations evolve when 
Progressive Web Apps become more 
commonplace and harder to distinguish 
from native applications.” 

Mikko concludes: “The range of interfaces 
to consider has recently expanded beyond 
different screen sizes and input devices. 
Depending on the service, it may be relevant > 
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Timeline 


2000 

Tuomas Syrjanen, Hanno Nevanlinna, 
Mikko Viikari and Markku Taulamo start 
their business developing image products 
and small applications. 

Employees: 5 


2003 

Futurice builds hit B2C imaging service 
Kuvaboxi and creates bespoke agile 
software development for clients. 
Employees: 15 


2008 

Futurice focuses on consulting in tech and 
design. Also works with bigger clients including 
Nokia. A new office in Tampere opens. 
Employees: 50 


2010 

Futurice expands internationally, beginning with 
Berlin. And Futurice celebrates its tenth birthday. 
Employees: 115 


2012 

First of two consecutive #1s in Great Place to 
Work Europe’s list for SMEs. London office opens. 
Employees: 180 


2013 

CEO Tuomas Syrjanen chosen as leader of 
the year by Finnish business magazine Fakta 
for the unique culture Futurice has created 
across its business. 

Employees: 225 


2014 

Futurice starts employee-initiated Spice 
Program: people are paid for open-source 
contributions in their free time. 
Employees: 275 


2015 

Futurice enters the VR market by building a VR 
time machine for the Helsinki City Museum. 
Employees: 325 


2016 

Employee-driven Chilicorn Fund launched, an 
open-source social responsibility initiative. 
New offices in Stockholm and Munich open. 
Employees: 375 


2017 

Groundbreaking facial recognition pilot at 
Helsinki Airport with Finnair and Finavia created. 
Employees: 450 


2018 

New Al initiative launched, headed by former 
CEO. New CEO Teemu Moisala takes the helm 
and a new office in Oslo opens. 

Employees: 500 
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Futurice and E.ON built an 
end-to-end digital sales and delivery 
platform for renewable energy 
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“We look for people who 

thrive on transparency, who 
are able to trust themselves, 
each other and our clients” 


to figure out how it should feature in a broader 
variety of channels, from chat apps and 

social media posts to smart watches, TVs, 
virtual reality glasses and voice assistants.” 

And what technologies are exciting Futurice 
at the moment? “In addition to the many 
frontend technologies discussed above, 
there is an explosion of different libraries for 
managing state in frontend applications and 
simultaneously trying to offer good support 
for type checkers, integrations with GraphQL, 
etc. lo-ts, mobx-state-tree, apollo-link-state 
are just a few examples from different parts 
of this space. 

“GraphQL itself is interesting in how it allows 
a different division of responsibilities between a 
frontend app and an API, which is more flexible 
and potentially more convenient than, for 
example, a traditional REST API. Within React, 
the asynchronous rendering and updated 
context API should allow the simplifying and 
unifying of some patterns that have made 
the ecosystem complex. 

“For startups and small teams, hosting 
options that don’t require operating system 
and server-level maintenance are great 
enablers. Heroku was a pioneer for this 
approach for apps that require bespoke 
backend logic, but Netlify has made a strong 
entry as a more modern challenger. 

“Moving further from frontend tech, we 
expect data-driven personalisation, 
recommendations, and other machine learning- 
based features to become a big part of future 
web applications. These can, in principle, be 
achieved with very different technical 
approaches, from relatively low level open- 
source libraries to features in existing product 
platforms such as CMSs or eCommerce 
products, to cloud-based machine learning 
services. Each approach places different 
requirements for the skillset in the 
development team and the overall architecture, 
and it is not yet clear which approach will be 
the most fruitful.” 

An agency is effectively only as good as the 
people it employs. What qualities do you look 
for ina prospective employee and what advice 
would you give to anyone looking to take a step 
into the industry? 

John explains: “This is pretty much the heart 
of our business — the people who make up our 
family. We look for people who thrive on 
transparency, who are able to trust themselves, 
each other and our clients, people who want to 
collaborate and who aren't afraid to share, 


iterate and improve what they do. And, almost 
above all, we look for people who are naturally 
curious, who care, who want to make the world 
a better place and who take the time to have 
hobbies they are passionate about.” 

As an agency with clear ambition, what does 


the future look like for Futurice? “Projects first,” 


John concludes: “We’re embarking on an 
engagement with Plan International: they’re 
currently leading an amazing initiative to 
design and build an open-source civil 
registration Global Good, which we’re helping 
to design and build in Bangladesh as a first 
reference implementation. It involves our 
advisory, design and technology skills to 
uncover the human needs and frictions around 
birth and death registration and how to 
respond to them in a technology platform that, 
once complete, could help ensure that millions 
of children are properly registered and avoid 
future exploitation and harm. 

“We're always on the lookout for 
opportunities to expand, having recently 
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opened our newest site in Oslo. And, most 
importantly, we’re always keen to provide a 
platform for our people to try out something 
new, which we can either turn into a new 
competence area to enrich the core of our 
business, or to spin off and launch as a new 
venture within the family. 

“Examples include Futurice XR, a growing 
initiative that focuses on virtual, augmented 
and mixed reality technology, as well as our 
subsidiaries, growth consultancy Columbia 
Road, and the recently launched Aito.ai, 
which is an Al startup aiming to provide a 
simple and effortless way for any business 
to rapidly implement and experiment with 
machine learning.” 

As Futurice states, you can’t predict the 
future so this agency creates it. The breadth of 
their understanding of the digital spaces they 
define is masterful. Coupled with an innate 
sense of the social, economic and emotional 
connections that digital environments can 
contain, Futurice innovates to build our future. 


futurice 


futurice.com 


Founders 
Tuomas Syrjanen, Hanno 
Nevanlinna, Mikko Viikari 

and Markku Taulamo 


Year Founded 
2000 


Current Employees 
500 


Location 
Helsinki, Berlin, London, Munich, 
Stockholm, Tampere, Oslo 


Services 
Digital visioning 


Human-centred design 
and build of experiences, 
services and products 


Business application of 
emerging technology 


Lean and agile ways of working 
Organisational transformation 
Data science and engineering 

Agile Software development 
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30 BEST HTML, CSS & JS APIs 
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SEMANTIC MARKUP IS VITAL FOR ACCESSIBILITY, SEARCH 
ENGINES AND MUCH MORE - BUT IT IS SO OFTEN MISUSED. 
BUILD A STRONG FOUNDATION AND TREAT CSS AND 
JAVASCRIPT LIKE AN ENHANCEMENT. 


Matt Crouch 
Software Engineer at Vidsy 
@mattcrouchuk, www.mattcrouch.net 
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30 BEST HTML, CSS & JS APIs 


HTML IS MORE CAPABLE THAN EVER BEFORE. MAKE SURE THAT YOUR 
SITE IS MAKING THE MOST OUT OF THE ELEMENTS AVAILABLE TODAY 
AND DON’T FORGET TO ENHANCE WITH CSS AND JS 
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Are you sure you want to submit? 


Yes 


Forms inside a dialog can submit with a ‘form’ 
method. The ‘returnValue’ of the modal is the 
value of the button used to submit 


No 


Display a popup or modal window without the overheads 


A common design pattern on the web is to 
have an extra window display to provide more 
information or options for a complicated 
interaction. Adding a confirmation as an extra 
step is also a good way to make a user aware 
their action will have consequences. 

These windows have been around for years 
through the help of libraries such as Bootstrap 
or jQuery UI. While they can be easy to 
implement, they often require heavy scripting 
and extra styling to match the look and feel of 
the site they are implemented into. 

One of the few elements added in HTML5.2 is 
<dialog>. This new, semantic element is 
designed to denote a supplementary, 
interactive component that displays out of the 
main flow of the document. 

<dialog open> 
<p>Dialog Content</p> 
</dialog> 


la/IKLTqoe 


The <dialog> element itself is designed to be as 
simple to use as possible. Any content within 
the tags will become part of the window and do 
not appear on the page by default. When the 
element has the ‘open’ attribute applied, it then 
appears centred based on where it appears in 
the DOM. 

While dialog boxes can request a response, a 
user can still navigate the page without having 
to interact with it. A modal window is similar to 
a dialog, but has the aim of requiring an action 
from the user before proceeding. This makes it 
useful for potentially destructive actions, such 
as deleting an account. 

const dialog = document. 
getElementById(“modal”) ; 

dialog. showModal () ; 

Modal windows can only be triggered using 
JavaScript. Once opened, the window 
appears completely centred within the user’s 


a, 2FIMe 


id=' 
method=" 


Are you sure you want to submit? 


Yes 
No 


Open Modal 


styles.css x 


screen and dims the rest of the page. The only 
way to close it will be by either pressing the 
escape key or by calling the ‘close’ method on 
the element. 

Non-native modal implementations often 
forget about the content behind the modal. For 
keyboard users, their browser can start 
focusing and interacting with elements 
underneath the modal that cannot be seen. 
Native modals make the rest of the content 
inert, making sure the focus stays within the 
window before being dismissed. 

Browser support is currently limited to 
Chrome, Opera and Samsung Internet 
browsers. As unsupported browsers treat 
unknown elements like a <span>, it makes it 
possible to add in this behaviour when needed. 
The Chrome team have put together a polyfill, 
which can be found at https://github.com/ 
GoogleChrome/dialog-polyfill 


This marks up the core content of 
the document. In contrast to any 
header, footer or navigation 


elements, its content will vary 
from page to page. There can only 
be one <main> element visible at 
any time. 
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This represents any area of a 
document that is responsible for 
navigation. This can be a site’s 
main navigation or a grouping of 
internal links such as a table of 
contents. Not all links need to be 
inside a <nav>. 
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Use a <header> to separate any 
kind of introductory content from 
the rest of the document. It is 
commonly used to define page 
headers, but alternatively it can 
also be used to add headers to 
sub-sections. 


In contrast to <header>, the 
<footer> element marks the final 
content of a page or section. This 
would typically hold extra 
information like author or 
copyright information, along with 
any related navigation. 


> What is a<details> element? 
> What is a<summary> element? 5 
v Which browsers support <details> and y 


<summary>? 


Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Aenean rhoncus sagittis 
massa, ut condimentum tortor 
scelerisque sed. Vestibulum laoreet 
laoreet dui in finibus. Quisque 
pellentesque ipsum sed mollis tempus. 
Nunc maximus tellus augue, vel sodales 
lectus efficitur fringilla. Mauris nibh 
lorem, iaculis interdum placerat nec, 
malesuada non erat. Etiam lacinia urna 
quis metus facilisis viverra. Aliquam 


frinailla cit amat cam nanwvwiilnuitata 


The accordion is a common user interface 
pattern. It serves as a way to fit potentially 
lengthy content in a small space, providing only 
some of it needs to be immediately visible. 
These work best for a table of contents, a set of 
frequently asked questions or any other 
accompanying information such as directions 
to a location. 

While many libraries exist to help solve this 
problem, it can also be achieved without any 
JavaScript at all. Content can be hidden inside a 
<details> element and therefore be toggled 
visible when clicked. 


index.html x 


1 DOCTYPE html 
html lang="en" 


head 


meta name= 
meta http: 


<meta charset=" 


content=" ie=edge 


link rel="stylesheet 


</head: 


<body: 
details 


details 
details 


details> 
details open: 


details: 
body> 


htm 


<summary>What is a <code>&lt;details&gt; 
p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
suscipit ac non velit. Aliquam elementum odio tellus, non ultrici 


summary>Which browsers support <code>&lt;details&gt; 
p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
suscipit ac non velit. Aliquam elementum odio tellus, non ultricil 


code> element?</summary> 


summary>What is a <code>&lt;summary&gt;</code> element?</summary: 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean 
suscipit ac non velit. Aliquam elementum odio tellus, non ultrici 


code> and <c 


The headings will have an arrow showing their 
expanded or collapsed status. This can be overridden, 
but requires specific CSS for each browser 


Each <details> element denotes a single 
collapsible area. Any content inside that block 
will be hidden by default until the ‘Details’ 
heading is clicked. 

Adding an ‘open’ attribute will expand the 
block. This can also be triggered through 
JavaScript as a way to reveal certain 
information to the user, such as an answer to a 
specific question. Adding a <summary> to the 
top of the block will replace the default heading 
to the contents of that element. That heading 
then becomes interactive, which makes the 
contents inside keyboard accessible. While it 
can have almost any value, adding other 
interactive or clickable elements such as 


<label> or <button> will override the collapsing 
behaviour and break the element. 

Multiple <details> elements can also be 
nested without issue. This could make it useful 
for nesting sub-links or hiding supplementary 
information within a block. 

According to the specification, <details> 
should be limited to additional information or 
controls rather than anything considered 
important to read. In some instances, a more 
semantic element such as <dl> for key-value 
pairs may be more suitable. 

Both <details> and <summary> are available 
in all browsers apart from Edge and IE. For 
these, information will display expanded by 
default, or a JS fallback can be used. 
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index.html x 


1 DOCTYPE html 
html lang="en' 


# <head> - 
head> 


body: 
picture 
source srcset=' 
source srcset=' 
source srcsi 
<source srcs 
source srcs 
source srcs 
<img alt="E 
picture: 


body: 


</html 


¥ 


Q 
@ 
‘3 
a 
» 
"a 


_- 


aia gp gs EES Se eat 
> 


ey tS 


Respond to different viewports and serve specialised content to serve them better 


When images need to be responsive, 
sometimes it isn’t enough simply to resize an 
image at certain breakpoints. On larger 
screens, the image can show as distorted and 
blocky but on smaller screens it could result in | 
downloading a much larger image than is 
required. 

Where images are used for informational 
purposes, it may make more sense to show an 
image adapted especially for a certain screen 
size or type. For example, larger screens may 
benefit from a fully annotated diagram, while 
smaller screens can get away with using 
coloured labels instead. 
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The <picture> element allows developers to 
define different sources for the same image. 
Based on the attributes passed to those 
sources, the browser determines which image 
to download and use. 

Each source defines a potential image to 
display. These can then optionally have 
different attributes to define when to display 
that image. The ‘media’ attribute works much 


like a media query in CSS, whereas ‘type’ 
defines the MIME type of the file. If a browser 
doesn’t meet the media query, or does not 
understand the file type, it moves on to the 
next <source> in the list. 

The block ends on a regular <img> element. 
This will display if none of the other images can 


| be displayed based on the conditions, or for 


browsers that do not understand the <picture> 


| element at all. 


The element itself acts more as a container 


| for the elements inside. By itself it has no visual 


appearance and will be distorted when the 
fallback image is used. Be sure to style this 


element for this use case. 


The <picture> element is best used in diagrams 
and informational images rather than simply 
supplying different resolution photos based on 
width. For that, use a regular img with a ‘srcset’ 
attribute. Using these hints, the browser can 
then decide which image to display. 

For more information on ‘srcset’ and how to 
combine its power with the <picture> element, 
make sure you pay a visit to https://www. 
html5rocks.com/en/tutorials/responsive/ 
picture-element 
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index.html x ave card-compone 


<!DOCTYPE html 
<html lang="en"> 


<head 
</head> 


<body 
<template id="card-component" 
<style> 
div { 
background: Mirgb(245, 245, 245); 
border: 1px solid Mrgb(220, 220, 220); 
} 


ivthover { 
border-color: Mirgb(180, 180, 180); 
} 


.sele { 
border-color: Mrgb(115, 190, 125); 
transform: scale(1.1); 

} 
</style> 
<div> 

slot></s lot 

div> 

/temp Late> 


<card-component>This is a card component</card-—component> 
card-component>This is a card component</card-component window. 
card-component>This is a card component</card-component> 
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</body: 


html> 


Struggling to find an element that fits? Make your own with JavaScript 


The introduction of HTML5 in 2014 brought 
with it lots of useful elements to browsers. 
Special components like progress bars used to 
mean misusing <div> elements in order to 
achieve the right visuals. These features are 
now native to the browser and elements like 
<progress> can be added where needed 
without having to worry too much about the 
inner workings. 

Thankfully, new web standards have been in 
development for some time to allow developers 
to make their own elements as part of the 
platform. Web components are a set of 
specifications that let developers create their 
own custom HTML tags and use them 
anywhere on a webpage. As long as they are 
registered using JavaScript, they are just as 
capable as any other element. 

Building a web component uses three 
different specifications in the browser to 
construct, configure and generate their inner 
workings. Let’s take a look at them. 


Custom elements 

The most important feature of web 
components are the use of custom elements. 
These allow developers to use their own tag to 
render something specific to the browser 
wherever it appears on a page. 

Each one is an ES2015 class that defines its 
behaviour, extending from an existing HTML 
element. These can contain any methods 
required for the operation of the component, 
but must use a constructor in order to set up 
any visuals or interactive elements such as 
event handlers. 

In order to behave like a native element, it is 
important that elements react to external 
changes. Every custom element can tap into 
callbacks, such as ‘connectedCallback’ or 
‘attributeChangedCallback’, to detect when an 
element needs to update. 

The ‘customElements’ window property will 
allow an element to be registered with the 
browser. Until it is registered, a custom element 


nt.js x 
ardComponent extends HTMLElement { 


uctor() { 
are G) 


st template = document.getElementById("card—comt 
st templateContent = template.content; 


5. attachShadow({ mode: ' }).appendChild( 
=mp LateContent. cloneNode(t rue) 


get observedAttributes() { 
rn ["selected"]: 


yuteChangedCallback(name, oldValue, newValue) { 
st card = this.shadowRoot.querySelector("div"); 


name === "selected") { 
(newalue === null) { 
card.classList. remove(" 
else { 
card.classList.add("select 


ustomE Lements.define( 


will be treated like any other unknown tag so it 


is important to design its behaviour with 
progressive enhancement in mind. 


Shadow DOM 
The Document Object Model - or DOM - 
represents each page as a set of connected 


elements. The shadow DOM is a hidden subset 


of further connections within a specific 
element of that DOM. Nothing inside the 
shadow DOM can affect anything outside. 
For example, a page may have a <video> 
element in its DOM, but the shadow DOM 
inside <video> houses the internal controls 
such as the play button and volume slider. 


While this behaviour has been in browsers 


for a while, the shadow DOM API allows 
developers to create their own. When 
used together with custom elements, they 
allow a full range of visuals to be displayed 


without worrying about affecting other parts 


of the page. 


HTML templates 


Page structure elements are often repeated to 
make sure each one works the same as the last. 
To save time and reduce errors, developers can 


Selecting templates 

Even inside a component class it is still possible 
to select elements within the page. Here the 
component is using the content from the 
‘card-component’ template in the main page. 


Open or closed? 

Shadow DOM can be in one of two modes. 
Being open allows it to be accessed externally 
using a ‘shadowRoot’ property, while being 


, CardComponent) ; 


closed does not. 


Scoped styles 
Styles are encapsulated within the shadow 

DOM, which means that any selectors written in 
this <style> element will not leak out to the rest 
of the page. 


Slot content 


By default, the content inside the component 
will be added to the first <slot> element within 
the template. In order to add content to specific 
slots, use the ‘name’ attribute. 


opt to make a function to generate HTML for an 
element, adjusting the contents as they go. 

HTML templates bring that ability natively to 
browsers through use of the <template> 
element. The contents of a template stay inert 
and invisible, but JavaScript can access it like 
regular content without issue. 

Extracting the contents of a template is as 
simple as selecting the template and getting its 
‘content’ property. It can then be used 
wherever needed and acts just like any other 
HTML content. 

All three specifications are designed to work 
together. A template can be used with the 
shadow DOM to produce the visuals for a 
custom element. 


Cross-browser support is good 
The best part about web components is 
that the support is almost there in every 
major browser. 

At the time of writing the latest versions of 
Chrome, Safari and Opera all support all 
web component specifications. 

As it stands, Firefox and Edge are both 
lacking full support for custom elements and 
shadow DOM, but polyfills are available to work 


in these browsers while these features are 
being developed. 

Mobile browsers have a wider level of 
support, with all features being available in the 
latest versions of Chrome for Android, 
Samsung Internet and iOS Safari. 

For updates on support and any new 
features, make sure to visit https://www. 
webcomponents.org 
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<INPUT> 


The most common of elements can be more flexible than you think 


Even the simplest of forms need some kind of 
validation. A contact form, for example, needs 
to check if a name and email have been filled 
out. Users now expect instant feedback on 
what has been entered. 

This used to be the role of JavaScript. If a 
website needed a date entry JavaScript would 
need to check a text value looked like a date. 
This required the developer knowing all the 
different formats that could be valid and 
implementing that check correctly. 

All of that changed with HTML5. The new 
specification introduced a host of new input 
types that could be added as needed without 
the need for scripted validation. 

When given a certain type, a browser 


ESSENTIAL JS APIS 
& ELEMENTS 


INTERSECTION OBSERVER 


https://bit.ly/2NO3ejx 
Fire a callback whenever an element 


enters and exits a certain area. Best for 
lazy loading or infinite scroll effects. 


REPORTING OBSERVER 


https://bit.ly/2OTO17n 
Get notified when the browser has to 


intervene, for example having to provide 
a fallback for a slow-loading font. 


OFFSCREENCANVAS 
https://developers.google.com/web/ 


updates/2018/08/offscreen-canvas 
Drawing to a <canvas> is an expensive 
task for a browser. This new API can 
render without hitting the DOM. 


INTERNATIONALISATION 
API 


https://mzl.la/1dsIHLk 

Avoid sending heavy libraries and show 
dates, numbers and strings in a format 
that makes sense in the user’s location. 


CSS PAINT API 


https://bit.ly/2IcGL1P 

Use JavaScript to generate dynamic 
backgrounds, borders and image masks 
and apply them in CSS without a heavy 
performance hit. 
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renders an appropriate interface geared 
towards that input. On touchscreen devices, 
this also meant a contextual keyboard that 
merited itself to the input in question. 

If used within a form, the validation occurs 
on submission. Browsers will show an inline 
error message for each field that is wrong, so 
users know what is happening. An invalid form 
will not submit. 


Colour inputs 

<input type=”"color” /> 

In forms where colour input is required, the 
‘color’ type provides either a colour picker or a 
hexadecimal text input to provide a value. 

The display of the colour picker can vary 
depending on the browser, which may only 
supply a limited subset of colours by default. A 
site using this input should provide an 
alternative method of input in this case. 

A default colour can be applied by supplying 
a ‘value’ to the field, but this must be a valid 
hex colour and not a CSS colour name or 
function like ‘linear-gradient’. If an invalid 
colour is added, it will default to black. 


Number inputs 

<input type="number” min="0” max="99” /> 
When a form requires a number, it makes sense 
to use an input specialised for that purpose. A 
number field get automatic validation to be 
sure the value is numerical. 

Most modern browsers will also render 
stepper buttons, which allow the user to 
increment or decrement the value inline. Ona 
touchscreen device, the keyboard will update 
to show numbers by default and may even 
allow users to swipe to increase and decrease 
the value. 

Extra attributes on the input can limit the 
value being entered. For example, an age field 
may have a ‘min’ attribute to stop a negative 
value being added. 

<input type=”range” min="0” max="10” /> 

When a specific value is not necessary, a 
range input may be more useful. In this case, 
browsers can render a more appropriate slider 
to allow the user to select a value more easily. 
These are useful for simple components such 
as volume sliders. 


Modes on any input 

While these type inputs are great for their 
typical use case, it can become a hindrance for 
others. For example, a credit card number is 
numeric but does not need the increment 

and decrement behaviour that the ‘number’ 


type provides. 
<input inputmode="numeric” pattern=”"[0-9]*” /> 
Most forms would fall back to regular text input 
in this case and use a ‘pattern’ attribute to 
define what is required. This requires the 
developer to know the right pattern for their 
input, which can cause a similar issue to before. 
An ‘inputmode’ attribute is coming to 

browsers that aims to tackle this issue. It hints 
to the browser what kind of interface would 
help the user add data to this field. Having a 
value of none will ensure no virtual keyboard is 
displayed, allowing for a custom keyboard 
within the page itself. 


Always server validate 
As great as these input types are, they are not 
without flaws. Browsers may not support a 
specific type or can have unexpected valid 
inputs, such as ‘e’ for number inputs. At the 
very least, a user can still edit the HTML ona 
page and remove validation altogether. 

It is important that any data submitted to a 
server is also validated on that side to avoid 
any issues. Include client-side validation to 
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When using the correct input type, browsers will 
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Depending on the device, virtual keyboards can show thi 2 Nour is Deen remo 1 anc 
vastly different input methods. For example, the 1 | nt rT ry \ F 
number keyboard on iOS still allows text input 


Browsers will update the input 
methods based on screen space 
available. For mobile devices, 
colour inputs are often chosen 
through sliders 


5 it appears within th 
typically ina monospace font to keep 
alignment intact. 

As this could potentially be unlimited 
in width, make sure to set an overflow 
value to make sure the rest of the layout 
stays intact. Also, be sure to provide an 
accessible description as screen readers 
will struggle to read its tents. 
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Create glitchy, 
blinking text effects 


Inspired by betamatters.com 


Blinking text Opening animation 

The most noticeable element on the home All the green elements on the screen 
page is the flashing, blinking, text letters that animate onto the screen one ata 
flash in and out and each one turns on like a time to build up the highly visual 
fluorescent tube light. illustrated scene. 


Ticker side bar Contextual content Navigation menu 

The green bar on the left is E Letting your visitors know exactly ~ = = : Clicking the navigation menu gives one 

reminiscent of TV news : what site they have landed on and of the best animated transitions that the 
tickers with the content its purpose is always a good way os 2 _ Web Designer team have ever seen, you 

continuously scrolling up. . - : = toorientate the uninitiated. —— - must see this for yourself! 
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Bringing the design together 
The betamatters website stands out so well because of it’s bold use of colour 
and imagery. The designers have thought through the kind of look that they 


<comment> | want to achieve and brought together illustration with design and code to 


What our 


experts think | Make the aesthetic effect stand out and have maximum impact for the user. 
ofthe site | Mark Shufflebottom, Professor of interaction Design 


Technique 
1. Blinking letters 


To make the blinking letter effect found on betamatters, 
add some images to the page that will act as the text to 
make blink on and off. The structure shown below is a 
minimal way to achieve this effect: 

<div id=”wrap”> 

<img src="images/b.png” class="letter b”> 
<img src=”images/e.png” class="letter e”> 
<img src="images/t.png” class="letter t”> 
<img src=”images/a.png” class="letter a”> 
</div> 


2. Style the content 
Now the content of the page will be styled with the 
background getting the right colour and the letter being 
given the right size. The opacity is turned off so that with 
JavaScript the ‘anim’ class can be added. 
body{ 
background: #5700c8; 
3 
.letter{ 
width: 15@px; 
opacity: 0; 
} 
-anim{ 
animation: glitch 1s forwards; 


} 


3. Blinking with keyframes 
Using keyframes, the ‘anim’ class in the previous step 
uses these to change the opacity and make the letters 
blink on and off as they appear onscreen. 
@keyframes glitch { 

@% {opacity: @;} 

40% {opacity: 1;} 

45% {opacity: 2;} 

50% f{opacity: 1;} 

55% {opacity: Q;} 

85% {opacity: 1;} 


90% {opacity: 2;} 
100% {opacity: 1;} 
a 


4. Making it work 
To make this effect work, first of all, the letters — which 
are child elements of the ‘wrap’ div — are placed into 
an array called ‘letters. The selected letter will be 
stored in the ‘sel’ variable. 

var elem = document. getElementById( ‘wrap’ ); 

var letters = []; 

var sel; 

for(i=0; i<elem.children.length; i++){ 

letters.push(elem.children[i]); 


5. Generate a letter 
The ‘generate’ function will randomly select one of the 
letters in the array and run a ‘setTimout' to call the 
‘animate’ function at a random time so that the 
letters appear more glitchy. 
function generate(){ 
sel = Math. floor(Math. random()*letters. 
length) ; 
setTimeout(animate, (Math. 
random()*500)+100) ; 
a 


6. Animating the letter 
The ‘animate’ function adds the ‘anim’ class to the letter 
and then removes this letter from the array so that it 
cant be called again. The ‘generate’ function is called 
to run which starts the whole process working. 
function animate(){ 
letters[sel].classList.add(“anim”) ; 
letters.splice(sel, 1); 
if( letters.length > @ ){ 
generate(); 


} 


generate(); 
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ebGL enables developers to create 
rich, console-quality experiences, 
that render in real time on mobile 
devices and desktop browsers. 
Nearly universal browser and device support makes it a 
perfect approach for web developers wanting to create 
incredible experiences. No plugins are required and you 
can start learning these technologies right away. 

One of the questions that comes up the most often 
about 3D development is about importing models. It’s 
often confusing trying to choose the right format and 
loading it correctly. You can accomplish a lot with 
primitives, but very often you want to integrate models 
created in 3D modeling software. 

You'll be using the popular 3D library Three js in this 
series. It’s free, open source and lightweight, and 
countless award-winning websites have used it. 

Building on previous tutorials, you'll move onto 
learning about loading complex models in your 3D 
scenes: What formats are supported, which are the best 
to use, and why. Plus, where to get models and how to 
get them into your scenes to start using them in 3D. 
Other than having a JavaScript background, you can dive 
into this tutorial with no prior knowledge and get some 
great results. The goal is to get you started in 3D web 
programming and to get you inspired. 


1. Choose your models 

To follow along, you'll need an OBJ format model and 

it's corresponding texture(s). You'll also need a gITF 

model as well. Here are two great sources for 

downloading models: 

* turbosquid.com/ 

* sketchfab.com/models?features=downloadable&so 
rt_by=-likeCount&type=models 

We've used the Pony Cartoon, by Slava Z, which you 

can buy or try out here: sketchfab.com/models/885d9 

f60b3a9429bb4077cfac5653cf9 


2. Create a basic HTML file 

Next, you need to set up a basic HTML file. You can 
setup external CSS and JavaScript files or include inline 
for simplicity. Three js’s ‘renderer’ class will create a 
<canvas> element for you. Add the following code to 
your ‘index.htm! file. 


~~ 


-X 


origin (0,0,0) 


Tutorials | 


EXPLORE STORE~ COMMUNITY 


Qo Sketchfab 


Models / Downloadable 


&@ scifi cir v.01 127.7k 


<!DOCTYPE html> 


<html> 

<head> 
<style> 
html, body { margin: Q; 
padding:@; overflow: hidden; } 
</style> 

</head> 

<body> 
<script> 

// Code will go here 

</script> 

</body> 

</html> 


3. Include Three.js classes 


nclude a link to the Three js library in the <head> of 
your file, either hosted externally or download it from 
he Three js repository. You will also need the 
‘OrbitControls, ‘OBJLoader’ and ‘GLTFLoader’ classes 
or this tutorial. You can find both the library and the 
supporting classes at github.com/mrdoob/Three.js/. 
ote: The code in this tutorial has been tested on the 
latest release of Three js v95. 
<script src=”libs/three.min.js”></script> 


<script src=”libs/OrbitControls.js”></script> 


ty 


+x 


+Z 


Q Search 


vnense 0 " 


CATEGORIES FILTERS SORT BY 


5.2k 103 w 2.3k &\ Ftm 46.2k ® 99 


<script src=”libs/OBJLoader.js”></script> 
<script src=”libs/GLTFLoader.js”></script> 


4. Add global variables 
Between your <script> tags for your code, add the 
following global variables to globally access the camera, 
scene, renders, loaded object and the Orbit controls. 
Instead of writing your own interactivity, you'll use the 
built in Orbit controls in this tutorial: 

// global vars 

var camera, scene, renderer, object, controls; 


5. Create a 3D scene 
You're going to add a basic 3D scene, which will be the 
container for your objects. The scene is the stage that 
will render with the camera. All 3D presentations will 
have a scene or stage of some form. What is in that 
stage and in view of the camera is what the user will 
see. Add the following code to add a scene: 

// create a scene object 

var scene = new THREE. Scene(); 


6. Add a perspective camera 

Next, you need to add a camera. You'll use the 
perspective camera, meant for 3D scenes. The first 
attribute is the field of view of the camera. The second 
is the aspect ratio (width:height). Then you indicate the 
near clipping plane and far clipping plane distances, 
which define what is to be visible to the camera. You'll 
also push the camera back in Z space a little to make 
things things easier to see. 

// create camera 

camera = new THREE.PerspectiveCamera( 75, 
window. innerWidth / window.innerHeight, 1, 


3D Model formats 


There are hundreds of file formats available for 3D 
models. They range widely in complexity, features 


and purpose. The Three.js library has many 
loaders available to handle these formats, 
including OBJ, FBX and gITF. 
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2000 ); 
camera.position.z = 15; 
scene.add( camera ); 


7. Add a renderer and canvas 
The ‘renderer’ handles the drawing of the objects in 
your scene that are visible to the camera. Set the 
‘antialias’ property to ‘true’ to get smooth edges on 
our object. The renderer creates a ‘domElement’, 
which is actually an HTML <canvas> element, you 
can then append to the body. Try setting your 
renderer's ‘gammaOutput to ‘true’ for optimal 
support of gITF models. 

// create renderer 

renderer = new THREE.WebGLRenderer ({ 

antialias:true}); 

renderer.setPixelRatio( window. 

devicePixelRatio ); 

renderer.setSize( window.innerWidth, window. 

innerHeight ); 

renderer.gammaOutput = true; 

document .body.appendChild( renderer .domElement 

5 


Testing 3D models 


To save yourself stress and lost hours, it’s a good 
idea to test out your models in one of the following 


online viewers. You can verify the model data is 
good, and tweak some settings before importing: 
* gITF Viewer: gltf-viewer.donmccurdy.com/ 

* Three.js Editor: threejs.org/editor/ 
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8. Add orbit controls 


To keep things simple, you can use Three js’s built-in 
‘orbit controls’ class. This enables you to drag the 
camera around in an ‘orbit’ around the target. You 
attach the controls to the camera and then set a 
target for it to orbit. 
// add orbit controls 
controls = new THREE.OrbitControls( camera ); 
controls.target.set( @, 0, @ ); 
controls.update() ; 


9. Add lights to the scene 
To light your loaded models, a balance of ambient and 
point or directional lights can work well. OBJ models do 
not have lights, but gITF scenes can include them. If 
your chosen model includes lights then you can either 
omit them later on, or use them as additional lighting. 
// add ambient light 
var ambientLight = new THREE.AmbientLight( 
Oxtititints 2008 
scene.add( ambientLight ); 
// add point light 
var pointLight = new THREE.PointLight( 
Oxffcc66, 0.6 ); 
camera.add( pointLight ); 


10. Load environment map 

Models often benefit from environment maps. These 
maps are ‘skyboxes’ that surround the object so it can 
affect it from all directions accurately, impacting the 


colour and intensity of the colour on the surface texture. 


A great Cube Maps resource can be found on the 


Humus site (humus.name/index.php?page=Textures). 
Add the following code to load your map: 

// create environment map 

var envMap = new THREE.CubeTextureLoader () 
.setPath( ‘assets/’) 

-load( [ ‘posx.jpg’, ‘negx.jpg’, ‘posy. jpg’, 
ENESY es) DEayes POS2 DS NeeZ pe amills 

// set as skybox 

scene.background = envMap; 

Note: the order of the cube map images is important, so 
be sure to follow the above pattern when setting yours. 


11. Create a loading 
manager and handlers 
You will be loading the OBJ format model first. It is 
a much simpler model, but needs more steps than 
a gITF model. Start by adding a ‘LoadingManager’ 
class and handlers for progress and completion. Use 
these to time the next step and when to show your 
model. For now we're going to keep things simple. 
// loading manager 
var manager = new THREE.LoadingManager (); 
Manager.onProgress = function ( item, loaded, 
total ) { 
console.log( item, loaded, total ); 
5 
// load complete 
Manager.onLoad = function ( ) { 
console.log( “finished loading models 
& textures” ); 


a 
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12. Set up textures array 
For some models, such as OBJ, you may want to 
manually assign the textures to the loaded model. Set 
up an array of textures for as many as you have for your 
model. Not all will have these, but you'll want at least 
one primary texture to use as the default ‘map’. 
// textures 
textures = []; 
textureAssets = [ 
{“file”:”assets/sword/German_Bastard_ 
Sword_DIFFUSE. jpg”, ”’name”:”"diffuse”}, 
{“file”:”assets/sword/German_Bastard_ 
Sword_SPECULAR. jpg”, ”’name”:”’specular”}, 
{“file”:”assets/sword/German_Bastard_ 
Sword_NORMALMAP.. jpg”, ’name” :”’normal” } 
IIB 


13. Load texture files 
You can use the ‘ImageLoader’ class to load in the 
image files and then assign them to your textures array. 
This gives you an easy way to access all your loaded 
images, SO you can assign them to your loaded OBJ 
model. It also connects to the loading manager you set 
up. Add the following code next: 
// assign each loaded texture to a texture 
object 
textureAssets. forEach(function(t){ 
textures[t.name] = new THREE. 
Texture(); 
var loader = new THREE. ImageLoader( 
Manager ); 
loader.load( t.file, function ( image 


SCALE @® 


Dnt 
textures[t.name].image = 
image; 
textures[t.name]. 
needsUpdate = true; 


DB. Ns 
14. Load OBJ Model 


Next, load in the OBJ file you want to use. You can use 
the ‘OBJLoader’ class to do this and connect it to your 
loading manager, like you did for the ‘ImageLoader’. 
Once it’s loaded you will be able to work with the 
resultant 3D object that is passed to the function. 
Add the following code: 
// load OBJ Model 
var loader = new THREE.OBJLoader( manager ); 
loader.load( ‘assets/sword/German_Bastard_ 
Sword.obj’, function ( obj ) { 
// handle loaded file here 
// adjust position and scale }); 


15. Handle the loaded OBJ 


Inside your ‘handler’ function, you can assign the 
textures to the loaded OBJ. Your loaded object may be 
comprised of multiple meshes, depending on the 
model. You need to ‘traverse’ the object and find the 
mesh you wish to assign the textures to. You can check 
if a child is an instance of a mesh. You could also check 
against its ‘name’ property. 

// handle loaded file here 

console. log(object) ; 

object=obj; 


gITF (GL 
Transmission 
Format) 


For years, there has beena 
large variety of 3D model 
formats with varying 
levels of performance 

and support. Now gITF 
has emerged as a viable 
standard format to use. 
There are exporters or 
convertors available for 
many of the major 3D 
applications. glTF reduces 
the size of 3D assets, and 
the real-time processing 
needed to use those assets. 
Both GLB and GLTF versions 
of the format are well 
supported by the Three.js 
library. gITF is compact to 
transmit and fast to load. 
Features include meshes, 
materials, textures, skins, 
skeletons, morph targets, 
animations, lights, and 
cameras. You'll also see that 
loading gITF scene data 

is extremely easy inside 
Three.js making it a great 
choice whenever possible 
You can read more about 
the format here: 
khronos.org/gltf/ 


object.traverse( function ( child ) { 
if ( child instanceof THREE.Mesh ) { 
// assign textures here 


ns 


16. Assign material to target mesh 
Once you have the mesh located, you can assign its 
‘material’ property as usual, using the textures in your 
textures array. If your OBJ also has an associated MTL 
file you could use the Three js MTLLoader and assign 
textures using that. It sometimes needs adjustments to 
work nicely, so we'll use this more straightforward 
method here. Add the following code next: 

// assign textures here 

child.material = new THREE. 

MeshPhysicalMaterial({ map: textures[“diffuse”], 

specularMap: textures[“specular”], normalMap:t 

extures[“normal”],envMap: envMap}) ; 


17. Set object scale and position 
Once you have your OBJ loaded and the materials 
assigned, you are ready to add it to the 3D scene. You'll 
most likely need to scale your model and position it 
where you can see it. This is going to vary depending 
on the model you use. You'll need to update ‘scale’ and 
‘position’, and ‘rotation’. Add the following code after 
your ‘traverse’ function: 

// adjust position and scale 
object.position.set(5,0,0); 

object. rotation. z=Math.P1/180«70; 
object.scale.set(.25,.25,.25); 

scene.add( object ); 


tutorial 59 


Tutorials 


Get started with Threejs—Part5 


Animation render 
loop and object rotation 
Next, you need to render your scene. You learned 
about the renderer in previous tutorials. It renders a 
frame inside the animation loop running at a target of 
60 frames per second. Add the following code and run 
it to see your loaded model: 


Remove textures 
and texture loading 
Now that you know how to load OBJ and assign 
textures, you can use these complex models in your 
scenes. However, there is a much better way to load 
models when you have the format available - and that 
is to use the gITF models. To do this, remove the code 
(approximately 25 lines) from ‘loading manager’ all the 
way down to the texture loading lines, including the 
texture assets for each section. 


Replace the OBJ 
loader with GLTF loader 
Next, replace the OBJ loader you were using with the 
gITF loader using the following code. Notice that the 
format is the same and the steps you follow are similar, 
but it’s just much simpler, the gITF loader handles all 
the texture assignments for you, and much more: 


Handle gITF model loaded 


Now that your gITF scene is loaded, you can use the 
‘traverse’ function you used before. This time it’s used 
to assign the ‘envMap’ you created. You could also 
manually adjust textures further using this method as 
well. Run this new code and you'll see your loaded gITF 
model! This is a great first step in getting complex 
models into your 3D scenes! 
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Transition between videos in a slideshow using Curtain,js to 
power the transition with WebGL and Shaders 
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ome of the most advanced effects on the 
web are found on sites which win various 
web awards for their respective ‘site of the 
day’. These are always great inspiration 
pieces to look at and get ideas from, and a recent trend 
has been to use something known as a shader in 

WebGL to create very advanced graphical effects. These 
can be quite difficult to use and require advanced 
programming skills to master. 

Curtainjs allows you to easily create transitions from 
one object to another using WebGL and shaders. In this 
tutorial, Curtainjs will be used to transition from one 
piece of video to another using a prebuilt shader that 
will use a displacement image to power the transition. 
What that means is instead of just fading from one to 
another, the different shades of the displacement image 
will affect the way it transitions and so some really 
advanced effects can be created. Because the shader is 
prebuilt the tutorial will focus on integrating the effect 
into a regular HTML page, adding the tags, the CSS and 
the JavaScript to power the way Curtainjs works. 
Shaders do offer the ability to create advanced 
interactions for your users and as Curtainjs takes some 
of the hassle out of this, it can help elevate your site 
above others. 


1. Adding the textures 
To get started, drag the start folder onto your code 
editor and open ‘index.html’. There is already some 
code in here for the design of the page. At the top of 
the body before all other content, add the code shown. 
It will add the ‘canvas’ element and the container of 
textures to make the video transition. 
<div id=”"vid-wrap”> 
<div id="canvas"></div> 
<div class="vid-textures- 
wrapper”> 
<div class="vid- 
textures” data-vs-id="vid-textures-vs” 
data-fs-id="vid-textures-fs"> 


2. Adding the video 

Now the image for the displacement is added onto the 
screen with two videos that will be used as textures in 
the WebGL. The shader will be able to move between 
these videos using the displacement as a mask to 
create the transition. 


<img src="images/ 
displacement. jpg” data-sampler="displacement” 
/> 
<video src="videos/v_tex1. 
mp4” data-sampler="firstTexture”></video> 
<video src="videos/v_tex2. 

mp4” data-sampler="secondTexture”></video> 

</div> 

</div> 
</div> 


3. Link up the library 
Now move to the end of the body tag and add the 
following script tags. The first links up the curtains 
library to the page so that the code from this can power 
the interactions. The second is the JavaScript file that 
will be used to add the interactions in this tutorial. 
<script src="js/curtains.min.js” type="text/ 
javascript”></script> 
<script src="js/setup.js” type="text/ 
javascript”></script> 


4. Adding the CSS 


After adding the HTML in the first two steps, it’s now 
time to style up that content. Switch over to the ‘style. 
css’ file and here the body is defined to remove the 
margins, increase the line height and to stop content 
overflowing on the x-axis. The 'vid-wrap' will hold the 
video that will transition so it’s made to fit 90% of the 
browser height. 
body { 
margin: Q; 
background: #ffffff; 
line-height: 1.6; 
overflow-x: hidden; 
3 
#vid-wrap { 
width: 100vw; 
height: 9@vh; 
overflow: hidden; 
background: url(images/bg. jpg) no-repeat 
center center; 
background-size: cover; 


} 


5. Painting on canvas 


The canvas element is where the WebGL content is 
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rendered, so inside here the width is set to the full width 
of the screen and the height to 90% of the viewport 
height. The opacity for this is turned off and it will 
transition in once the video content has loaded. 
#canvas { 

height: 9Qvh; 

width: 100vw; 

z-index: 10; 


opacity: Q; 

transition: opacity 0.5s ease-in; 
a 
6. Triggering changes 


When the page has loaded and the video has 
started playing, the JavaScript file will add the 
‘video-started’ class to the page. This then fades the 
video in by making it fully opaque. The video textures 
wrapper is set to fill the screen and is positioned behind 
other content. 
.video-started #canvas { 
opacity: 1; 
i 
.vid-textures-wrapper { 
position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%, -50%); 
Z-indexs 15. 


} 


7. The video textures 
The video textures are stretched to fill the screen and 
then temporarily made invisible to keep them out of 
public view for the time being. These will be used by 
the code to be placed in the webGL content as textures 
on planes. 
.vid-textures { 

position: absolute; 

top: Q; 

right: Q; 


Curtain, what? 


Curtain.js solves the problem of positioning 


WebGL planes relative to your page as you 
position your elements with CSS, and then the 
code converts into WebGL and shader content. 


tutorial 63 


Tutorials 
Code smart WebGL transition effects 


—_ 


EXPLORE O 


EXPLORE OUR BRAND 


bottom: Q; 
left: Q; 

cursor: pointer; 
font-size: 3em; 
color: white; 


opacity: Q; 

transition: opacity @.5s ease-in; 
3 
8. Inner content 


Inside the video textures the video and image are 


turned completely off so that they cannot be seen at all. 


They are not needed for the tutorial, but they will be 
used inside the canvas element as their content is 
passed in via code to be used in the scene. 
.video-started .vid-textures { 
opacity: 1; 
} 
.vid-textures img, .vid-textures video { 
display: none; 
} 


9. Amessage for mobile 

If the website is being displayed on mobile then a ‘click 
to play’ message will be added because mobile can't 
auto-play video. The ‘enter-site-wrapper’ class holds that 
message. It will only be displayed if a mobile device is 


What is a shader? 


A shader is a program that is written in a C-like 
that controls 


language. It is a very specific progra 
the graphics card to do advanced graphic features. 
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#enter-site-wrapper { 


z-index: 230; 
opacity: Q; 
transition: opacity @.5s ease-in; 
i 
.curtains-ready #enter-site-wrapper { 
opacity: 1; 
i 


10. Turning off the message 
Here the message for ‘clicking to play’ is turned 
off when the video has started; if the video has 


started there is no need to click to play. The ‘enter-site’ 


is the message so it has a dark grey background to 
make the content legible on the screen, over the 
placeholder image. 
.curtains-ready.video-started #enter-site- 
wrapper { 

opacity: Q; 

pointer-events: none; 
i 
#enter-site { 

padding: 2@px; 

color: white; 

background: rgba(@, 2, @, 0.5); 

max-width: 20Qpx; 

text-align: center; 

cursor: pointer; 


} 
11. Open the JavaScript 


Save and close the ‘styles.css’ now as it is completed. 
Open the ‘setupjs’ from the js folder and it should be 
empty. The code here gets access to the canvas 
element after the page has finished loading. 
The active texture is used to switch between textures, 
and the timer will measure how long has passed in 
the transition. 
window.onload = function() { 
var canvasContainer = document. 
getElementById("canvas”) ; 
var activeTexture = 1; 
var transitionTimer = Q; 


12. Variable essentials 
These variables hold the reference to instantiate a new 
Curtains object, then the textures are placed into a 
variable named ‘planeElements’ As there is more than 
one, it becomes an array of the three textures. The 
element that will change the video is referenced and 
the pixel ratio stored. 
var webGLCurtain = new Curtains("canvas”) ; 
var planeElements = document. 
getElementsByClassName("vid-textures”) ; 
var clicker = document. 
getElementBylId("featured”) ; 
var pixelRatio = window.devicePixelRatio ? 
window. devicePixelRatio : 1.0; 


13. Parameters for the shader 
The shader needs some parameters adding in that 
allow the shader to run. The resolution of the curtains 
element is updated so that the dimensions are passed 
in, which is width and height multiplied by the pixel ratio 
of the screen from the previous step. 
var params = { 
uniforms: { 
resolution: { 
name: "uResolution”, 
type: "2f", 
value: [pixelRatio * 
planeElements[@].clientWidth, pixelRatio * 
planeElements[0].clientHeight], 
3; 


14. Timing is everything 
The timing of the transition needs to be passed into the 
shader. These values will be updated later on so that it 
can time the change from one of the video textures to 
the other. This completes the information that is 
required to be passed into the shader. 
transitionTimer: { 

name: "uTransitionTimer”, 

type: "1f", 

value: Q, 

3; 
ie a 


15. Checking the device 
A plane is added into the WebGL scene with the first 
texture, which just happens to be the displacement 
map. The function ‘isMobile’ is defined here and it 
simply checks if the browser can support orientation 
changes. If it’s ‘IEMobile’ then this is being displayed on 
a mobile device. 

var multiTexturesPlane = webGLCurtain. 
addPlane(planeElements[@], params) ; 

function isMobileDevice() { 

return (typeof window.orientation !== 

"undefined”) || (navigator.userAgent. 

indexOf('IEMobile’) !== -1); 

3 


16. Changing video 
When the multi-textures plane is ready this adds a class 
to the body that causes transitions to occur in fading 


Tutorials 
Code smart WebGL transition effects 


Setting displacement images 


You can completely change the effect 

of the transition by simply changing the 
image that is used as the displacement 
image. You need to make sure the image 
is in greyscale values but then just save it 
as aregular RGB JPEG image. In the code 
change the line: 


Here, another image has been used, 
which is a rippled swimming pool image. 
Instead of the geometric lines in the 
transition there are wavy ripples that 
transform the video images together. It’s 
best to use a greyscale image because 

it uses the different shades of grey to 
transform the amount of movement. The 
lighter areas transform faster than the 
darker areas, so keep that in mind when 
selecting your own image to use. 


the video in. The clicker object which will change the 
videos is given an event listener and this will switch out 
the textures in the scene causing the video transition. 


Start playing 
The start function from the previous code is defined 
here and this adds a class to the body that tells the 
screen that the video has started playing. The videos 
themselves are called to play so that the effect can 
work, and the webGL content will update with the 


Finishing up 
The final step just monitors the transition back to 
the other video. Save this file now and test in the 
browser. The video will start playing automatically 
on desktop but requires a click on mobile devices. 
The video transition takes place every time the user 


video image. clicks on the screen. 


Changing the textures 
When the activeTexture variable is changed this 
function deals with that by creating the transition from 
one screen to the other and timing the transition over. 
In the final step these values are passed into the shader 
and that updates the display on the screen. 


Updating the screen size 
If the browser window is changed in its size, which can 
happen by changing orientation on mobile, the screen 
size is updated for rendering. The variable ‘mobile’ calls 
the function to check if this is a mobile device or not, 


We Invite You To 


EXPLORE OUR BRAND 


and stores the result as true or false. 


What to do? 


Once we know if this is a mobile device or not, some 
decisions can be made. If it is, a button is placed on the 
screen that will allow the user to start the video as it 
needs a click to play on mobile. Otherwise if it's desktop, 
the video just starts to play as it is. 


We Invite You To 


EXPLORE OUR BRAND 
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How to research 
your keywords | 


Ranking for the right keywords can make or break 
your website, meaning research is absolutely vital 


tutorial 


y researching your market's keyword 
demand you can not only learn which 
terms and phrases to target, but also 
learn more about your audience. 

Your primary objective shouldn't be ranking for just 
one single keyword but increasing the total domain 
authority through content quality and relevancy to your 
target audience. 

Keywords have long played a central role in SEO and 
driving traffic to websites. Originally the mechanics were 
straightforward, although today the use of keywords is 
much more complicated. Google's algorithms have 
become much more complex (Rank Brain Al, in 
particular), and they now evaluate the intention behind 
your query and then search for a ‘best fit’ candidate in 
its network of indexed sites. 

Clarifying the intentions and purpose of your 
business to Google is therefore paramount in achieving 
good quality traffic. The modern customer journey is 
also complex, so it’s important to focus on the key 
moments that can help inspire people to interact and 
engage with your business. 

With the evolution of SERP features and a more 
personalised approach to search results, you cannot 
solely rely on a page 1 keyword ranking to get you as 
much traffic as possible. Here's how you can master 
keyword research... 


1. Understand short and long tail 
Researching the terminology that inspires your 
audience and encourages them to convert is crucial. 
These high intent keywords are an excellent 
opportunity to connect with qualified, conversion-ready 
audiences. These keywords can be broken down into: 

* Short tail (shorter, more generalised with greater 


search volume). 
* Long tail (longer, more specific with less search 
volume, which also has an impact with voice search). 
These variants will have an impact on impressions, click 
through rates and competition. 


2. Start with ideation and research 


A good place to start is with Ideation. Brainstorm your 
ideal customer's keyword search terms and establish a 
baseline list. These seed keywords define your niche 
and describe your service. Get into the mindset of your 
audience: who they are and what are their pain points; 
get to know them better by studying their terminology. 

If you can, utilise your ‘search box’ result 
terminology to outline what your target customer is 
thinking during their buyer journey. Brainstorm their 
Awareness stages (Inspiration-pain points), 
Consideration stages (research-comparison) and 
Decision stages (purchase-advocacy). 


3. Google your initial ideas 

The next step is to understand what keyword 
terminology, in line with your ideation list, is used by 
your audiences in the search engines. Investigate the 
SERP and review what Google believes is the most 
relevant to your keyword. 

There is also an opportunity to review the ‘searches 
related to’ field in Google (bottom of the page). This will 
showcase a wealth of related keyword searches aligned 
with your initial thoughts. You can also head over to 
Google Trends (https://trends.google.com/trends) and 
review how your keywords have evolved. This will give 
you a good indication of interest and related topics due 
to seasonality, geography/location and media coverage 
to add further weight and terms to your list. 


Searches related to keywords 3 | 


keywords everywhere seo keywords generator 


free keyword tool find keywords for website 
keyword tool youtube google keyword traffic tool 


google keyword planner free keyword suggestion tool 


Goooooooooogle » 


12345 67 8910 Next 


PEOPLE ALSO ASK 4) | 
What are website keywords? 

How to search keywords on computer? 
How to find keywords on a page? 


What are keywords and phrases? 


Related Searches for keywords 
free keyword search keyword generator 
google keyword planner free keyword search engine 
google adwords keyword planner key words everywhere 


keyword researcher google key words search 


Advantageous 
analysis 


‘Site Explorer’ in AHRefs (https://ahrefs.com) 
enables you to browse the keywords your 


competitors rank for, closing the gap between 

those terms you are not taking advantage of and 
ultimately increasing traffic to your own domain. 
The ‘Content Gap Tool’ also highlights keywords 
that all your competitors rank for, but you don't. 
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Google Search Console 


Improve your 
performance on 
Google Search 


Search Console tools and reports help you measure 
your site's Search traffic and performance, fix 
issues and make your site shine in Google Search 
results 


ia 


eerd Parner 


Reach the right 
customers with 
the right 


keywords. SES nGnanee 


Leverage featured 
snippets 


A rich answer is a snippet that contains a brief 


answer to a search query. It appears above other 
organic search results and thus enjoys more 
exposure. Identify ‘keyword questions’ you might 
answer (such as FAQs) and create great answers, 
then amplify reach. 
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4. Don’t forget about Bing 
Bing is increasing its share of the search engine market, 
with the mass release and rollout of Windows 10. The 
savvy marketers will capitalise on this and understand 
that Bing may have a certain demographic to target. 
Keyword terminology will therefore be a key factor 
with this channel and nuisances between this and 
Google will be evident. Research keyword terminology 
around this older demographic and the opportunities 
that come from it. 


5. Analyse your competitors’ 
organic keywords 

Having an insight into what your competition is doing 
well - and what keywords they rank for - can give you a 
huge advantage. 


Review the websites appearing on the first page 
naturally alongside your ideation list. Dig deeper into 
these websites, understanding the keyword terminology 
used within their URLs, header hierarchy, meta titles 
and descriptions. 


6. Analyse your competitors’ 

PPC keywords 

Look at what keyword terms the competition is bidding 
on. You can do this as per your initial research process 
utilising your ideation list within the search engines. As 
well as utilising third-party tools to save time, a useful 
tool that can help with this is SoyFu (https://www. 
spyfu.com). Simply enter the competitor's website 
domain and press enter. 


7. Understand what you already 
rank for 

As well as building your keyword list, knowing what you 
already rank for can increase opportunities to target 
keyword placements outside of page 1 positioning. This 
can highlight ‘easy wins’ with Page 2 positioning’s that 
need a simple push! 

Go to Google Search Console, click Search Traffic> 
Search Analytics, filter by Queries and click ‘Clicks/ 
Impressions/CTR/Position. Then select Dates and Filter 
by Position to view the positioning and terminology. 


8. Set primary and secondary 
keywords 

Now you have a list, select a primary keyword and a set 
of related secondary keywords that share your 
searcher's intent (understanding what their motivation is 
crucial). The intent behind these keyword terms and 
phrases should be the same, so the same landing page 
content can ultimately serve it. Employ these primary, 
secondary and related keywords in the page's content, 
metas and links. 


9. Gain some metrics 

Use your keyword list inside the free ‘Google Keyword 

Tool’ (https://adwords.google.com/home/tools/ 

keyword-planner). Here you can review these metrics: 

¢ Search Volume: understand the search demand for 
a keyword and utilise this alongside ‘Google Trends’ 
for insights on seasonality. 

¢ Keyword Difficulty: is a balance between the 
business value of the keyword and its ranking 
difficulty. Invest in where you will receive the best 
return and be patient for the results. 

¢ Clicks: Having volume is great, but PPC adverts, 
localised map listings and rich snippets can 
immediately answer or steal clicks. Be mindful of this 
metric when selecting keywords. 


10. Structure your keyword list 
Having generated a list and used the metrics to identify 
the very best keywords, it’s now time to add some 
structure to your list. Ideally this process is whatever 
makes the most sense to you. For example, group by 
keyword topic and landing page, or group by user 
intent, or group by business value. 
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Prioritise actions based 
upon Groupings 

Group by Topic and Page: find 
which keywords (primary and 
secondary) are semantically and 
contextually related, and group 
them under a ‘highest volume 
keyword’ to target within a single 
page. Highlight the keywords and 
the page within your spreadsheet. 
Group by Intent: at what stage 

is your audience in the buyer’s 
journey (ZMOT - UMOT); what 

is their intent;what are their 
expectations? This moves us into 
the implementation of the design 
and content of the page, building 
the page to match expectations 
and keyword relevancy. 

Group by business value/ 
commercial intent: be mindful of 
vanity metric keywords and those 
which will drive a clear ROI. 
Prioritise: The aim with any 
keyword research is to utilise 

the findings across your website 
content and back-end metas. The 
best keyword strategy is a diverse 
one that understands each page 
will have its own challenges. 
Review each page individually 
and embrace the flexibility of 
topic-based, location, short tail 
and long tail keywords. 


All 
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Headline focus | Animated changes 
The headline is designed in All of the animation is 

a way that makes it the only defined in the CSS, making it 
visible content on the page easy to change the visual 

to get the full attention of effect without needing to 
the reader. update the JavaScript. 


Changing element 
The changing part of the 
headline requires more 
advanced functionality to 
control the individual words 
separately from each other. 


<comment> 
What our 
experts think 
of the site 


JavaScript and CSS. 


Keep it simple and separate 

The content, styling and functional code are created in a way that keep 
everything separate. While JavaScript is used to control the animation 
timings, it only alters the page with the required class to trigger visual 
changes from the CSS. There is no dependency between the HTML, 


Leon Brown, developer and author of e-learning content at nextpoint.co.uk 


Create a changing headline effect 
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1. Document initiation 

The first step is to initiate the web page document. 

This consists of the document container that stores the 
<body> and <head> sections. While the <head> section is 
used to load the external JavaScript and CSS resources, 
the <body> section is used in Step 2 to store the web 
page's content elements. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Text Wipe Effect</title> 

<link rel="stylesheet” type="text/css” 
href="styles.css” /> 

<script src=”code.js”></script> 

</head> 

<body> 

*%&k STEP 2 HERE 

</body> 

</html> 


2. Page body content 

The content is made from an <hl> heading that is used to 
store a collection of <span> tags. Each <span> tag stores 
one row of content — with the last <span> tag storing the 
items that will be repeatedly animated. 


<hl> 
<span>Testing</span> 
<span>Testing</span> 
<span> 
<span>One</span> 
<span>Two</span> 
<span>Three</span> 
</span> 
</h1> 


3. CSS: General span styles 
Create a new file called ‘styles.css. The stylesheet sets 
presentation rules applied to all <span> elements inside 


the <hl> tag. ‘Width’ and ‘overflow’ are set for invisibility 
by default, with ‘transition’ set to animate change on 
width. These elements appear at full width when the 
‘open’ class is applied. 
h1 span{ 
position: relative; 
display: block; 
width: Q; 
min-height: lem; 
transition: width 3s; 
overflow: hidden; 
3} 
hl span. open{ 
width: 100%; 
3 


4. CSS: last item spans 
Child spans for the repeating animation require additional 
settings for their position and initial visibility. Using their 
parent's relative positioning, these elements are placed in 
the top-left corner of their parent’s starting position. 
Visibility is activated when the ‘open’ class is applied. The 
‘span’ items within the first level <span> container require 
specific styling for their animation. 
hl span > span{ 
position: absolute; 


top: Q; 
left: Q; 
opacity: Q; 
color: red; 

3 

hl span.open > span.open{ 
opacity: 1; 

Ay 


5. JavaScript Event function 

Create a new file called ‘code js. This step initiates the 
‘effect’ function, which will repeatedly call itself every two 
seconds (2000 milliseconds) to update the animation. 
This function is kickstarted by an immediate call after 
the web page has loaded. 


var effect = function({ 
*k* STEP 6 HERE 
setTimeout (function(){ 


effect() 
}, 20@@) ; 
} 
window. addEventListener(“load”, function(){ 
effect(); 
y); 


6. Opening first level spans 
A search is performed to find the first child ‘span’ inside 
the <hl> parent that doesn't have the ‘open’ class. The 
‘open’ class is applied If its parent is the ‘HT element, 
triggering the CSS animation. If not, the code found in 
Step 7 is executed instead. 
var item = document.querySelector(“h1 
span:not(.open)”) ; 
if(item.parentNode.tagName == “H1”){ 
item.classList.add(“open”) ; 
jelse{ 
*k* STEP 7 HERE 
Ei 


7. Find last span children 

Children of the last ‘span’ element require different 
treatment for their animation. A variable, ‘n’, references 
the index of the item to update. Siblings to the item are 
identified for application of Step 8. The sibling at 
position ‘n’ is updated with the ‘open’ class — 
triggering the CSS animation. 

var n = @; 
var nodes = item.parentNode. children; 
for(var i=@; i<nodes.length; it++){ 

*k* STEP 8 HERE 

3 
nodes[n].classList.add(“open”) ; 


8. Node class check 
Inside the ‘for loop from Step 7, each item is checked to 
see if it contains the ‘open’ class. If it does, the ‘n’ variable 
is updated with the next available index position — reset 
to ‘O' if beyond the last item. This step also attempts to 
remove the ‘open class if it exists. 
if (nodes[i].classList.contains(“open”)){ 
var n = it+1; 
if(n >= nodes.length)n = Q; 
i 


nodes[i].classList.remove (“open”) ; 


Testing 
Testing 
One 


Three 
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JAVASCRIPT 
MEETS REAL 
HARDWARE 


JavaScript-based protocols made little ingress 
into the embedded space. The Web Things API 
working group wants to shake up the status quo 


feature 


What is the Web Thing API? 


Embedded systems are more than code. Mozilla’s Web of Things concept takes a 


few interesting decisions which we analyze before diving in 


The Internet of Things usually isn’t 
heterogeneous. Developers 
working on hardware pick 
protocols without much 
afterthought. The approach might 
annoy web developers but makes 
good sense. Keep in mind that 
many, if not most electronics 
goods in the market run on simple 
microcontrollers. 

Providers of cloud or integration 
services tend to work witha 
multi-tier approach. Powerful 
smart devices such as a process 
computer can connect directly to 
cloud infrastructures - keep in 
mind that real-time operating 
systems usually are not happy 
about additional jobs. 


INTRODUCING MR. GATEWAY 
Power-constrained devices cannot 
handle the (pretty large) burden of 
a TCP-IP stack. They tend to use 
embedded wireless protocols 
distinct from the ones used on the 
internet at large. 

The WoT working group 
addresses this problem via a 
gateway. Think of it as a 
transparent translation engine 
between things and the cloud, 
taking care that message 
exchange takes place in a format 
both sides understand. 


Direct Integration Pattern 


A QUESTION OF PRESENTATION! 
While MQTT has largely done 
away with custom binary 
protocols, the HTTP protocol and 
its friends have not made 
significant inroads. At first glance, 
this is understandable - overhead 
is extremely high, parsing JSON on 
an eight-bit microcontroller with 
less than 1 kB of RAM is not 
particularly funny. 

Due to this lack of presence, the 
Web of Things workgroups started 
with a clean sheet design - it, 
sadly, led to two completely 
different approaches. API number 
One is the Web of Things (WoT) 
Scripting API, documented at 
https://www.w3.org/TR/wot- 
scripting-api. It specifies things 
and an accompanying JavaScript 
API, developers can use it to 
interact with hardware. 

On the Mozilla side, the 
ecosystem offers the Web Thing 
API at https://iot.mozilla.org/wot. 
It forgoes JavaScript for the use of 
REST and WebSocket APIs. One 
extremely interesting aspect 
involves the use of vendor- 
independent properties, actions 
and events. 

The idea involves the use of 
abstractions - a smart light 
behaves much the same, 


Gateway Integration Pattern 


The gateway acts as a translator between things and the cloud 


independent from which vendor 
created it. As long as vendors 
implement the property as 
described, lights behave the same. 
These units can then be combined 
into clusters - for example, a smart 
fridge with an LED might expose 
the smart light interface to make 
complication with its decorative 


What can the WoT API do? 


Here’s five things that WoT can do fo you 


Cloud Integration Pattern 


feature 


WHERE JAVASCRIPT MEETS REAL HARDWARE 


75 


nt imit you 


While Wi-Fi is commonly used 
when networking computers, 
the loT space is relatively 
hostile to it - Wi-Fi transmitters 
can easily use more than 
100mA of current when 
transmitting information. 

Mozilla’s lof Gateway can 
include support for various 
wireless protocols which are 
better suited to the Internet of 
Things - think about systems 
like Z-Wave or the well-known 
Zigbee protocol stack. 

Firing them up is as easy as 
connecting an adapter, which 
usually plugs into one of the 
four USB ports at the back of 
your Raspberry Pi. More 
information about compatible 
modules can be found by 
visiting the supported 
hardware list, which the Mozilla 
team kindly provides at https:// 
github.com/mozilla-iot/wiki/ 
wiki/Supported-Hardware. 


Fire up the ESP32 


Emulating web things is boring. Espressif’s ESP32 lets us build something real 


Espressif does not offer its core 
libraries via the Arduino 
deployment system - instead, 
code must be downloaded using 
GitHub via the command git clone 
https://github.com/me-no-dev/ 
ESPAsyncWebServer. 

Compress the contents of the 
received repository to create a file 
called ESPAsyncWebServer.zip, 
and install it using the Manage 
Libraries option of the Arduino 
IDE. Repeat the process with the 
second library, which resides at 
https://github.com/me-no-dev/ 
AsyncTCP. A full archive can also 
be found at http://www. 
tamoggemon.com/test/2018/ 
esp32-webthings-libs.zip. 

Finally, click Sketch > Include 
Library — Manage Libraries, look 
for “ArduinoJson” and select 
version 5.13.2 for installation - beta 
versions of V6 are not supported. 
The final missing library is called 
webthing, as of this writing, 
version 0.4.1 is current. 


CREATE A SKETCH 
Our program starts off by 
including a set of headers 
providing access to the hardware. 
We connect an LED to GPIO 12 in 
order to let our thing emit 
information to the outside world. 
#include <Arduino.h> 
#include “Thing.h” 


#include “WebThingAdapter .h” 
const int ledPin = 12; 
Things expose a set of properties. 
In the case of the Arduino library, 
create a few global variables to 
hold status and other information: 
WebThingAdapter* adapter; 
const char* ledTypes[] = 
{“OnOffSwitch”, “Light”, 
nullptr}; 
ThingDevice led(“led”, “A LED”, 
ledTypes) ; 
ThingProperty ledOn(“on”’, “”, 
BOOLEAN, “OnOffProperty”) ; 
The bulk of the code is responsible 
for the establishment of a WiFi 
connection. Be sure to replace ssid 
and password with values 
applicable to your local network. 
bool lastOn = false; 
void setup(void){ 
pinMode(ledPin, OUTPUT); 
digitalWrite(ledPin, HIGH); 
Serial .begin(11520Q) ; 
WiFi.mode(WIFI_STA) ; 
WiFi.begin(ssid, password) ; 
bool blink = true; 
while (WiFi.status() != WL_ 
CONNECTED) { 
delay (50@) ; 
i) 
digitalWrite(ledPin, HIGH); 
Serial.println(“”); 
Serial.print(“IP address: “); 
Serial.println(WiFi.localIP()); 
adapter = new 
WebThingAdapter (“w25”, WiFi. 
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localIP()); 

Once the WiFi stack is connected 

to a network, information about 

the IP address can be emitted to 

the serial monitor of the IDE: 
led. addProperty(&ledOn) ; 
adapter->addDevice(&led) ; 
adapter->begin(); 
Serial.println(“HTTP server 

started”); 
Serial.print(“http://”); 
Serial.print(WiFi.localIPQ); 
Serial.print(“/things/”) ; 
Serial.println(led.id); 


} 
The last part of the program 
provides CPU time to the adapter 
during invocations of the loopQ 
function: 
void loop(void){ 

adapter->update() ; 

bool on = ledOn.getValue(). 
boolean; 

digitalWrite(ledPin, on ? LOW : 
HIGH) ; 

if (on != lastOn) { 

Serial.print(led. id); 
Semiallptelinit Ges) 

Serial.println(on); 

} 

lastOn = on; 
} 
When done, install the program on 
your ESP32 and note down the 
URL emitted in the serial monitor 
- in the following steps, we assume 
http://192.168.1.105/things/led 
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Set things up 


Let us guide you through 
the ESP32 world 


ESP32 planars come dime a 
dozen. We will use the DEVKIT 
C, which is conveniently 
available from https://www. 
elektor.com/esp32-devkitc. 
First, make sure that all relevant 
drivers are installed and that 
the serial port becomes visible. 
As we work on Linux, we expect 
it to mount at /dev/ttyUSBO. 

Open a recent Arduino IDE 
(>=1.8), and use the board 
manager to install an ESP32 
core according to the steps 
outlined at https://github.com/ 
espressif/arduino-esp32/blob/ 
master/docs/arduino-ide/ 
boards_manager.md. Next, 
open the Board choice tool and 
select “ESP32 Dev Module”. 

Finally, use the Tools menu to 
select the correct serial port. 
When setup is complete, deploy 
a sketch of choice - if the 
programming process 
succeeds, all is well. 


Working with hardware isn’t 
everybody’s thing. If you feel 
like using a virtual thing instead 
of the real deal, Mozilla also has 
you covered. Developers 
working with Android can find a 
Java library at https://github. 
com/mozilla-iot/webthing- 
java - it transforms any 
JVM-based device into a Web 
Thing. Friends of Node.JS find a 
complete implementation at 
https://github.com/mozilla- 
iot/webthing-node. It provides 
a fully event-driven 
implementation of the Web 
Things API and comes 
complete with samples. 

Should none of these strike 
your fancy, visit https://github. 
com/mozilla-iot/webthing- 
python. It provides a Python 
3.5 library which does 
essentially the same thing - 
keep in mind that most 
programming languages can 
somehow embed Python code. 
Finally, the code can also be 
rewritten - TCP/IP support and 
a JSON parser are almost 
universally available. 


Mozilla’s predefined libraries 
aren’t limited to Espressif’s 
processors. As of this writing, 
the Arduino sketch can also be 
run on any Arduino connected 
to a MKR-series WiFi shield. If 
this does not suffice, 
developers can fall back to the 
serial adapter library hosted at 
https://github.com/mozilla-iot/ 
serial-adapter. 

It transforms a USB port into 
a primitive serial port. Ultra- 
low-end MCUs can parse the 
information emitted, and can 
thus connect themselves to the 
gateway without the burden of 
implementing the whole TCP/IP 
protocol from scratch. Sadly, its 
memory consumption still isn’t 
low - some incoming messages 
are more than 130 bytes long. 
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e are wired for visuals. About half 
of our brain is dedicated for visual 
unctions, and 90% of the 
nformation transmitted is visual. 
What this implies is that users are more likely to obtain 
clear insights from data that is visually and aesthetically 
presented as opposed to a slew of numbers. 

Enter data visualization. In simple terms, this involves 
representing data graphically through forms such as 
charts, infographics and dashboards. While software 
applications ship with in-built data analytic features that 
provide the sought-after visualization, representing data 
visually in websites and web-based projects can be 
challenging, especially where interactive interpretation is 
needed. A modern JavaScript library that is tackling this 
problem is Apex Charts. The library serves two key roles; 
creating beautiful JavaScript charts and providing an 
effective visual and interactive representation of data. 
Apex Charts is open-source, easy to use and highly 
customisable. It also provides diverse chart types that can 
be combined to provide a rich and visual representation 
of data. 


In this tutorial, the fundamentals of the library are 
discussed and a practical application of the library 
demonstrated, whereby a simple dashboard with several 
charts is created. Here's how... 


1. Getting started 

Begin by creating a folder, apex, on your desktop to store 
the tutorial files. Create two additional folders within it: 
CSS to store the styling files, and JS to store JavaScript 
files. HTML files will be stored in the root folder (apex). 
Create a file ‘styles.css’ in the CSS folder and ‘indexjs’ 

in the JS folder. These will be used in the later section of 
the tutorial. 


2. Creating the main HTML 

page structure 

Open any code editor and create an ‘index.html’ 
document to contain mark up for the main webpage. 
Begin by creating the basic structure and give a suitable 
itle to the page. 
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<! DOCTYPE html> 
<html lang=”en”> 
<head> 
<meta charset="utf-8”> 
<title>Simple Dashboard using Apex 
Charts </title> 
</head> 
<body> </body> 
</html> 


DESIGNING THE 
DASHBOARD LAYOUT 


3. Adding rows 
The aim of the tutorial is to create a simple dashboard 
layout using the library. As such, the main page will be 
structured into three sections, each with a different chart 
type using the Bootstrap grid layout. To do this, create a 
main container class div in the body section, and within it, 
add two Bootstrap rows. 
<body> 
<div class=’container”> 
<h1> Simple Dashboard using 
Apex Charts </h1> 
<div class=”row”’></div> 
<div class=”row”’></div> 
</div> 
</body> 


4. Adding columns 

Essentially, the dashboard being created in this tutorial will 
contain a bar graph in the first row and two pie charts in 
the second row. Subsequently, the first row contains only 
1column while the second is divided into two columns. 
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Add the following code in the second row in order to 
divide it into two columns while ensuring that the first row 
remains unchanged. 
<body> 
<div class=”container”> 
<h1> Simple Dashboard using 
Apex Charts </h1> 
<div class=”row’></div> 
<div class=”row”> 
<div class=”col-lg-6”></div> 
<div class=”col-lg-6”></div> 
</div> 
</div> 
</body> 


5. Specifying chart positions 
Now that columns have been specified in the webpage, 
create new divs within the different sections where 
chart functionality will be added using JavaScript. 
Differentiate these sections by assigning a unique id to 
each section (chart’, ‘chartt’ ‘chart2’) respectively. 
Similarly, assign a unique CSS class for each section in 
order to facilitate styling. 
<div class=”row”> 
<div id=’chart” class=”bar-graph”></div> 
</div> 
<div class=”row’> 
<div class=”col-lg-6”> 
<div id=”chart1” class=”radial”></ 
div> 
</div> 
<div class=”col-lg-6”> 
<div id=”chart2” class=”circle”></div> 
</div> 
</div> 


STYLING THE WEBPAGE 
6. Header and page background 


Next, open the ‘styles.css’ file created earlier and specify 
styling to centralise the heading in the webpage and add 


Apex Charts 
or Chartjs? 


Chart.js is also a JavaScript library that facilitates 
the creation of visual charts. The library’s demo 
page http://www.chartjs.org/samples/latest 


offers diverse examples that can be studied and 
utilised in projects. Likewise, Apex Charts has 
collated several demos for review (https:// 
apexcharts.com/javascript-chart-demos). Take a 
look at Chart.js if you cannot find what you want in 
the Apex Charts library. 
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a background colour. Copy the code below which <script type=”text/javascript” src=”path/to/ i 

specifies the header’s font, size, colour and positioning, apexcharts.min.js”></script> { 

and specifies a white background for the dashboard. In the latter's case, simply add the link below in the name: “Social Media’, 

hit head section. type: “column”, 

text-align: center; <script src=” https://unpkg.com/apexcharts/ data; [23, 42, 35, 27, 43, 22, 1%, 31, 
position: relative; dist/apexcharts.min. js”></script> 22, 22, 12, 16] 
margin: 20px; Finally, link the ‘indexjs’ file created earlier, by adding the } 
top: 15%; code below in the body section: ap 
font-family: Trebuchet MS, Arial, <script src=”js/index.js”></script> } 


Helvetica, sans-serif; 


font-size: 25px; CREATING THE DASHBOARD 
color: #167676; 
} 8. An overview 
html, body £{ Before proceeding to create different charts using the 
background-color: #fff; library, it is important to understand the flow of logic 
} adhered to in creating them. In essence, creating the 


With the header centralised and background set to white, 
link the stylesheet in the header section by adding the 
following code: 

<link rel=”’stylesheet” href="css/styles.css” > 
Currently, the landing page is very basic as it only 
contains coloured text on a white background. 


7. Preparing to add JavaScript 
functionality 

Begin by linking the Apex Charts JavaScript library to the 
webpage. Two alternatives exist: either downloading the 
file from the official website https://apexcharts.com/ 
downloads/apexcharts-bundle.zip) or directly linking it 
from a CDN source such as unpkg or jsdelivr. 

In the former's case, first download and extract the 
bundle in an easily accessible section. Next, copy the 
‘apexcharts.minjs' file contained within it, and paste it in 
the JS folder created in step 1. Link the file as follows in the 
body section of the page: 


Using in Vue and React 


React-ApexCharts and Vue-ApexCharts are 
wrapper components for Apex Charts that are 
easily integrated with applications utilising either 


React.js or Vue.js respectively. Refer to https:// 


library involves only three steps. 

Step 1: declaring the options variable and specifying the 
chart functionality. 

Step 2: declaring the chart variable and passing two key 
arguments: the document's section where the chart is 
targeted and the option specifications created in step 1. 
Step 3: rendering the chart. 

As such, we've followed this process in creating the three 
different charts in the tutorial. 


9. The bar graph 
Open the ‘indexjs’ file created in step 1. Begin by declaring 
the options variable where the functionality of the Apex 
Chart will be defined. Creating a bar graph involves five 
steps: specifying the graph type, adding series data, 
specifying stroke, adding chart title and data labels and 
finally adding axis details. 
Begin by specifying the graph type as line and adding 

the data to be visually represented as shown below. 

var options = { 


chart: { 
height: 300, 
type: “line” 
}, 
series: [ 
ne 


The code above specifies that a line chart of height 300 
will be created. Further, it will visually represent two types 
of data in a column format: website blog and social media. 


10. Chart title 
ext, add the chart title and data labels for the series 
added in step 10. Copy the code below which specifies a 
stroke width of size 4 and a smooth animation of the 
column data. Likewise, the chart title is added and labels 
specified for the different series’ data points. 
Add the data below. 
stroke: { 
width: [0, 4], 
“smooth’ 


curve: 
3, 
title: { 
text: 
}, 
labels: [ 
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step 


82 


s involved. 


tutorial 


name: “Website Blog”, 

type: “column”, 

data: [440, 505, 414, 671, 227, 413, 
20S 52- ae 52ee S20 a 25a 6Oll 


11. Axis details 

Next, specify the axis details by indicating the data type 
and specific labels for each axis. Copy the code below 
which assigns a type of date-time to the x axis and 
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Get creative with Apex Charts - 
design, methods and features 
Once the foundational concepts of creating 
with Apex Charts have been understood, 
enhance the different charts by tweaking 
the design and utilising methods that are 
maintained in the repository (https:// 
apexcharts.com/docs/installation). In 
terms of the chart design, the library offers 
the capability to use diverse backgrounds 
ranging from patterns and image fills to solid 
colours and gradients. Additional methods 
are also provided to make it easier to update 
charts once they are created. For instance, 
adding annotations at the x and y axes, 
appending data, adding text etc. Finally, 


le os various chart features can also be tweaked 
such as the animation, interactivity, Zoom, 
Custom Angie Cite Cis legends and tooltips among others. For 
Gradient example, observe the creative use of image 
Radialbars with Imaae backgrounds in creating the radial bar. 
likewise assigns labels for each axes. width: 300, right: 20%; 
xaxis: { type: ‘donut’, padding: 1px; } 
type: “datetime” ay .radial{ 
a position: absolute; 
yaxis: [ title: { top: 55%; 
{ left: 20%; 
title: { text: “Respondent Age” padding: 1px; } 
text: “Website Blog” Both charts should now render. 
3} }, 
ir series: [44, 55, 41, 17, 15], 15. The multiple radial bar charts 
labels: [“18-30”, “31-40”, At this stage, finalise development of the dashboard by 
opposite: true, “41-56”, “51-60” , “61-70" ] } creating a multiple radial bar chart in the right column, 
title: { next to the donut pie chart. Begin by creating a new file 
text: “Social Media” 14. Rendering the pie chart ‘chart2js' in the JS folder. 
} Next, render the chart by adding the two parameters to Four steps are involved in creating a multiple radial bar 
} the chart variable. Note that the div ‘chart!’ specified in chart: specifying the type of chart, declaring the plot 
al step 5 is referenced in order to ensure the chart renders options, adding chart title and the series data. Copy the 
ys in the appropriate column of the dashboard. code over the page that specifies the chart type and 


12. Rendering the bar graph 
Now that the details of the chart have been specified, a 
new chart variable is created and the options variable 
passed as an argument to the chart div created in step 5. 
The chart is then rendered. Copy the code below. 
var chart = new ApexCharts (document. 
querySelector (“#chart”), options); 
chart.render (); 
The bar graph should now render. 


13. The pie chart 

(simple donut) 

Next, a pie chart is created in the left column of the 
second row, beneath the bar graph. To do this, create a 
new JavaScript file ‘chartljs’ and save it in the JS folder. As 
previously discussed, three steps are involved in creating 
the pie chart: declaring the options variable, creating the 
charts variable and rendering the chart. 

However, unlike the bar graph, creating the pie chart is 
slightly different: specify the chart type and size, add a 
title and add the series data. Copy the code below into 
‘chartljs, which specifies the chart type of donut, a title 
and the series cata. 

chart: { 


var chart = new ApexCharts ( 
document. 

querySelector (“#chart1”), options); 
chart.render(); 
However, we need to style them using absolute 
positioning. Paste the following CSS code in ‘styles.css’ 
.circle{ 

position: absolute; 

top: 55%; 


declares the plot options. 
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chart: { 
height: 280, 
type: “radialBar” 
}, 
plotOptions: { 
circle: { 
dataLabels: { 
showOn: “hover” 
} 
} 
}, 
title: { 
text: “Survey Responses” 
3; 


series: [44, 55, 67, 83], 

labels: [“Disagree”, “Strongly 
Disagree”, “Neutral”, “Strongly Agree” ] 
ae 


16. Rendering the multiple 

radial bar charts 

Finally, render the chart by passing the appropriate 
parameters similar to steps 11 and 13. However, ensure that 
‘chart2’ is referenced as the page section where the Apex 
Chart is rendered. Add the code below to chart2js. 


var chart = new ApexCharts ( 
document. querySelector 
(“4#chart2”), options); 
chart.render (); 
The three charts should now render. 


TWEAKING THE 
DASHBOARD 


17. Adding annotations to the 
bar graph y axis 
Annotations enable you to write custom text on specific 
values or on axes values. We can create an annotation to 
indicate the value of the highest web traffic (September 
2001). To do this, simply paste the following code after 
chart.renderQ . 
chart .addYaxisAnnotation({ 

Mel gon. 

yAxisIndex: Q, 

label: { 

text: 


}, 


‘Highest Web traffic’ 


}) 
The render should appear as shown. Notice the dotted 
line rendered at September. 
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18. And to the x axis 

Annotations can also be added to the x axis if required. If 
we wanted to indicate that in May 2001 there was a 
system problem that led to poor performance, we can do 
this by simply pasting the code below after chart.render0. 
The render should appear smoothly. Check the code on 
the FileSilo download site. 


19. Adding point annotations to 
the bar graph 
Apart from adding annotations to the x and y axes, 
point annotations can also be added at specific points 
in the graph. Suppose you would like to indicate that 
the website was updated in September 2001 leading to 
the improved traffic. Simply paste the code below after 
chart.render () 
chart.addPointAnnotation ({ 
x: new Date (‘@1 Sep 2001’).getTime(), 
We TAs, 
label: { 
text: 
Ds 
3) 
Render the chart again. Observe the annotation present 
at September without the clotted line as was the case in 
step 17. 


EXPLORING THE 
APEX CHARTS LIBRARY 


“New Web Update’ 


20. Robust features 

Unfortunately, the tutorial cannot cover all the different 
unique features associated with the library. However, the 
resource that can be found at https://apexcharts.com/ 
features provides elaborate examples of how to style the 
charts, utilise different colour palettes, add smooth 
animations, annotations and interactivity. We'd 
recommend exploring this section of the Apex Charts 
world to advance your projects further. Have fun and let 
us know how you get on! 
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By default, Node.JS is a JavaScript runtime. Introducing the fast and low 
overhead web framework Fastify can make serving HTML really simple 


Home 


— fastify AE 


Fast and low overhead web framework, for Node.js 


| sus Fo Yo 


cS Ecosystem 


ichmarks Help 


Why 


An efficient server implies a lower cost of the infrastructure, a better responsiveness under load and happy users. How can you efficiently handle the 
resources of your server, knowing that you are serving the highest number of requests as possible, without sacrificing security validations and handy 
development? 


Enter Fastify. Fastify is a web framework highly focused on providing the best developer experience with the least overhead and a powerful plugin 
architecture. It is inspired by Hapi and Express and as far as we know, it is one of the fastest web frameworks in town. 


Who is using Fastify? 


Fastify is proudly powering a large ecosystem of organisations and products out there. 


Discover i ising F . Do want your organisation to 


tutorial 


ntering a URL into a web browser’s 
address field may look innocent to end 
users — but in the background, a set of 
complex processes kick off. Implementing 
HTTP handshakes by hand is a tedious task, which 
developers should outsource to routing frameworks. 

TJ Holowaychuk’s seminal Express.js product is the 
best-known candidate. Its creator had a stroke of genius 
by adapting the event-handling framework known from 
operating systems such as Palm OS to the serving of web 
pages. Developers committed one or more route objects 
to the base framework, which the system queried as URL 
requests came in — the detection of a match triggered 
the relevant element's processing function. 

As time went by, the growth of the JavaScript and 
Nodejs ecosystems propelled Expressjs into ever-larger 
projects. These placed stringent demands on 
performance — if thousands of requests are to be 
handled each second, even minimal overheads take a 
significant toll. 

A team around the Italian JavaScript expert Matteo 
Collina set out to create a slimmed-down version of 
Express js. Developers who seek to implement REST APIs 
or basic HTTP interactions are well-advised to take a look 
at the product — were going to introduce it in more detail 
in the following steps. 


1. Ready for liftoff 


Fastify is a Node js package like any other — installing it is 
best accomplished by creating a new NPM project and 
executing the ‘nom install’ command as shown in the 
code accompanying this step. As of this writing, version 
111.2 is current, but breaking changes have been rare in 
the product's recent history. 
tamhan@tamhan-thinkpad:~/nodespace$ mkdir 
fastifytest 
tamhan@tamhan-thinkpad:~/nodespace$ npm init 
tamhan@tamhan-thinkpad:~/nodespace$ cd 
fastifytest/ 
tamhan@tamhan-thinkpad: ~/nodespace/ 
fastifytest$ npm install fastify 


2. Open a server 

Create a file called ‘indexjs’ and start out by adding the 
code shown below. It uses the ‘requireQ’ command to get 
a reference to the framework’s mother object, and 
proceeds to invoke its constructor. Fastify’s entry point 
can also take various parameters, which modify 

program behavior as whole: 
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Of course, Fastify can do much more than this. 


const fastify = require('fastify')() 


fastify.route({ 


method: 'GET', 
urls 2/5 
schema: { 
request needs to have a queryst 


querystring: { 
name: { type: ‘string’ } 


const fastify = require(‘fastify’)( 

fastify.get(‘/’, (request, reply) => { 
reply.send({ hello: ‘world’ }) 

») 


3. Get cracking 
Now that the server instance is ready to rumble, invoke 
the ‘listen’ method to fire it off. The number passed in 
describes the network port, which Fastify will use to 
receive HTTP requests from clients. 
fastify.listen(3000, (err) => { 
if (err) { 
fastify.log.error(err) 
process.exit(1) 
3 
fastify.log.info(‘server listening on 
${fastify.server.address().port}*) 
») 


4. Async considered possible 

Fastify is anon-dogmatic framework. Developers can 
decide if they prefer the traditional coding style shown in 
he article, or if the ‘async/await’ pattern introduced in 
ECMAScript 5 is more interesting. Both programming 
styles are considered equal — an ‘async version of our 
example is shown here, while the documentation usually 
provides both ‘sync’ and ‘async’ versions. 


tamhan@tamhan-thinkpad: ~/nodespace/fastifytest 
tamhan@tamhan-thinkpad:~/nodespace/fastifytest$ node index 


Request/Response validation and hooks 


For example, you can easily provide input and output validation using JSON Schema and 
perform specific operation before the handler is executed: 


ring with a name 


async/await @ 


parameter 


const fastify = require(‘fastify’)Q 
fastify.get(‘/’, async (request, reply) => { 


return { hello: ‘world’ } 
}) 
const stant = asyne)@=>e( 
teva 


await fastify.listen(3000) 
fastify.log.info(‘server listening on 
${fastify.server.address().port}*) 
} catch (err) { 
fastify.log.error(err) 
process.exit(1) 
iy 
start() 


5. Start it up 
As with most other Nodejs-based programs, our 
Fastify-based server starts up after you enter ‘node index’ 
into a Terminal window. Our configuration makes the 
server listen for input on port 3000. Harvest the JSON 
output with a browser of choice, as seen in the figure 
accompanying this step. 
tamhan@tamhan-thinkpad: ~/nodespace/fastifytest$ 
node index 


6. Disable local security 

Fastify's developers see the framework’s main use case in 
the creation of APIs, which usually do not need to be 
accessed from the outside. As limited access scopes is a 
classic security design pattern, allowing ‘global’ access to 
the Fastify server requires an additional parameter for the 
‘listen’ function. 


Mind user rights 


When working on Linux boxes, opening a server 
on ports <1024 usually requires super-user rights. 


Keep this in mind before invoking ‘npm run’ if 
your project uses Fastify to serve HTTP on the 
protocol’s well-known port 80. 
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tamhan@tamhan-thinkpad: ~ 


TX packets:1 
collisions 


29 errors: 
txqueuele ) 

TX bytes 
Interrupt:20 Memory: f250 0-f2520000 
Link encap:Local Loopback 
in ©.0.1 Mask:255.0.0.0 
inet6 addr: ::1/128 Scope:Host 
UP LOOPBACK RUNNING MTU:65536 Metri 
RX packets:2155404 errors:0 dropped:0 
TX packets:2155404 errors:0 dropped:0 
collisions:® txqueuelen:1 
RX bytes:586762471 (586.7 MB) 


Link encap:Ethernet 
inet addr:192.168 192.168 
inet6 addr: feso:: :fe53:29c/ 
UP BROADCAST RUNNING MULTICAST 
RX packets: 
TX packets 
collisions 
RX bytes:2672 


2114189 errors:0 dropped:0 
325840 errors:0 dropped:0 
txqueuelen: 1000 
185381 (2.6 GB) 


tamhan@tamhan-thinkpad:~$ | 


TX bytes: 


HWaddr a4:4e:31:53:02:9c 
: -0.255 


MTU:1500 


dropped:® overruns:0 carrier:0 


21014488 (1.0 MB) 


1 
overruns: 
overruns: 


586762471 (586.7 MB) 


4 Scope:Link 
Metric:1 

overrun frame:0 
overruns:0 carrier:0 


TX bytes:453343708 (453.3 MB) 


Unable to connect 


Firefox can’t establish a connection to the server at 192.168.0.15:3000. 
© The site could be temporarily unavailable or too busy. Try again in 
afew moments. 


e IF you are unable to load any pages, check your computer's 
network connection. 


© If your computer or network is protected by a firewall or proxy, 
make sure that Firefox is permitted to access the Web. 


fastify.listen(3000, ‘0.0.0.0’, function (err, 
address) { 
if (err) { 
fastify.log.error(err) 
process. exit(1) 


} 


7. Handle additional HTTP verbs 
Fastify is not limited to ‘get’ commands. The framework 
handles the entire verb assortment found in the HTTP 
protocol. Let us demonstrate this by taking a look at 
the dedicated functions shown in the code box 
accompanying this step. If you want to register a handler 
for ‘post’, simply use its method instead of the ‘get’ 
command shown above. 
fastify.get(path, [options], handler) 
fastify.head(path, [options], handler) 
fastify.post(path, [options], handler) 
fastify.put(path, [options], handler) 
fastify.delete(path, [options], handler) 
fastify.options(path, [options], handler) 
fastify.patch(path, [options], handler) 


8. Add a parametric route... 
Routes are not limited to static matcher strings. If your 
API needs the presence of one or more parameters, they 
can be declared using the colon character. If a route is 
able to match the string, parameters arrive in the 
‘requests.params’ object. 
const fastify = require(‘fastify’)(Q 
fastify.get(‘/tamsapi/:userId’, (request, 
reply) => { 


e e 
Support policies 
Fastify releases will get at least six months of 
support after their initial launch. Further 


information on the policies can be found by visiting 
fastify.io/docs/latest/LTS/ in a browser of choice. 
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reply.send({ whatisit: request.params. 
userId }) 
» 


9. Add verification support 

JSON and XML are superior to proprietary data formats 
as an entire ecosystem of verification tools exist. In the 
case of Fastify, developers may submit both incoming 
and outgoing information to a JSON scheme verification 
process based on the venerable (and very fast) Ajv plugin 
found at npmjs.com/package/ajv. 


10.Set up ascheme 
Fastify schemes take the form of JSON objects containing 
descriptive information about the way the element 
should look. In the case of our simple API, we must verify 
two incoming parameters in regards to their type. 
const schema = { 
params: { 
type: ‘object’, 
properties: { 
userId: { type: ‘number’ }, 


aName: { type: ‘string’ } 


Mozilla Firefox 


localhost:3000/tamsapi/Peter xX 


Headers 


localhost 


< 


JSON Raw Data 


Save Copy 


whatisit “Peter” 


} 


11. Deploy the input scheme 
Creating the JSON object is just half of the trick. Verb 
methods such as the ‘get’ call used for registering a new 
route take an optional parameter of the ‘schema’ type. In 
principle, passing in the parameter could not be easier — 
the main issue involves the obligatory use of winged 
parentheses around it. 
fastify.get(‘/tamsapi/:userId/:aName’, { 
schema }, (request, reply) => { 
reply.send({ whatisit: request.params. 
userId }) 
}) 


12. Cause a verification problem 
Now that the verifier is set up, invoke a non-complying 
URL such as http://localhost:3000/tamsapi/AAA/AAA. In 
addition to a 400’ error, the error message returned also 
contains the string ‘params.userld should be number’. 
This can be a problem for security-critical applications — 
telling your attacker more about the syntax of an 
unknown API tends to be a bad idea. 


13. Deep verification 
Verifying URL schemes is but a subset of the capabilities 
of Fastify. The example accompanying this step shows 
how the body of an entire ‘post’ request can be 
checked to ensure the presence of a set of keys. Do 
bear in mind that body verification does not work 
with bodyless ‘get’ requests. 

const opts = { 


schema: { 
body: { 
type: ‘object’, 
properties: { 
someKey: { type: ‘string’ }, 
someOtherKey: { type: ‘number’ } 
4; 
3 
} 
dj 
14. Scheme on steroids 


Serialising objects for transmission consumes immense 
amounts of processor time. Fastify’s ‘fast-json-stringify’ 
significantly accelerates the process, thereby saving 
time when returning information to the consumer. 
Sadly, using ‘fast-json-stringify’ requires the declaration 
of an output schema. 

const schema = { 

params: { 


}, 
response: { 
200: { 
type: ‘object’, 
properties: { 


whatisit: { type: ‘string’ }, 
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ve i Routt | Re its/ Lat Thi hput/Mb Aquestion of 
fersion outer tequests/s tency roughpu' . 
,| microbenchmarks 
bare 8.49.2) |x 30156.8 3.23 4.36 German computing 
f + 1 
connect -router 4.902 ’ 32603.8 2.98 4.62 experts love to quote 
t {| Klaus Gims’ excellent work 
connect 3.6.6 x 38119.2 2.54 5.37 ‘ 
on microbenchmarks 
express-route-prefix 4.16.2 | 7 18524.95 5.45 6.46 frequently — and one of his 
+ 1 
express-with-middlewares | 4.46.2 | v 14403.4 6.83 5.24 core messages was that 
4] getting reliable results is 
express 4.16.2 “ 22365.2 4.38 3.50 all but easy 
t 1 ‘ 
fastify-big-json 1.6.8. Us 5273.8 18.83 | 60.60 The Fastify team 
ae Ar t = t = aS 1} has endeared itself to 
‘as 5. ¥ ° 6 “err 
} us i \ developers by providing 
hapi 17.5.0 | ¢ 21769.2 4.53 3.42 aseries of benchmarks 
a a a 
koa-router 7.4.0 Ca 23903.6 4.1 3.74 whose code can be 
| inspected at github.com/ 
koa 2.5.0 x 24987.2 3.92 3.89 fastify/benchmarks 
+ + 1 
micro 9.1.0 |x 35254.4 2.75 5.54 and shows excellent 
+ 1] performance in both 
microrouter CRIs b “ 19473.6 5.04 3.03 latency, throughput and 
polka 0.4.0 ’ 36824 2.63 5.23 request handling capability. 
| . 
rayo 1.0.0 ’ 35299.2 2.74 5.06 Classic frameworks such as 
4 4 1; Express.js get pummelled, 
restify 7.1.0 |¢ 20796 4.38 3.30 with lesser-known 
spirit-router 0.5.0 |v 27592.4 3.2 4.34 competitors faring better. 
= + 1 One thing that makes the 
spirit sede Sane ee pa ;| data believable is that the 
take-five 1.3.5 ’ 29164.8 3.04 9.74 Fastify team’s own product 
3 is not at the very top — 
total.js 2.9.30 | v 2850.8 4.29 6.51 sec 
frameworks such as Spirit 
trek-engine 1.0.5 x 31837 .2 3.06 4.58 and Connect manage to be 
trek-router 1.2.0 |v 28472.8 3.43 4.41 slightly faster by ditching 
: : 1} the router infrastructure. 
15. Go generic! : ‘object’ 
e g : type: ‘object’, 


As response codes trigger via their numerical IDs, 
developers can associate them with more than one 
return code. As an example, look at the declaration 
accompanying this step — it handles all responses, 
which have a code in the 200 range. 


const schema = { 
response: { 
eX Xe aan 


json-schema-validator-generator 


properties: { 


3 
3, 


16. Prevent information leakage 
Setting up schemes does more than simply increase 
performance. Fastify discards all information not found in 
the declaration of the scheme, thereby preventing data 
leaks. A good example would be adding an additional 
parameter to ‘reply.send’ — as long as the route contains 
an output schema, the value of ‘howmany’ will not arrive 
at the client. 

fastify.get(‘/tamsapi/:userId/:aName’, { 

schema }, (request, reply) => { 

reply.send({ whatisit: request.params. 
userld, 
howmany:”202” }) 
) 


17. Enable logging 
Mistakenly enabling debugger functions is a common 
anti-pattern, leading to reduced performance. Fastify 
tackles this problem by forcing developers to enable the 
logger in an act of will during program initialisation — 
you can not turn it on once the startup process of the 
framework is complete. 

const fastify = require(‘fastify’) ({ 

logger: true 
y) 
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Documentation 


aaa diet ib Fastify / Documentation / v1.11.x 
Getting Started 
Server 
Routes 
Logging 
Middlewares Validation 


Hooks 


Decorators 


Validation and Serialization 


Validation 
Adding a shared schema 


Retrieving a copy of all shared 


© Github 


/ Validation and Serialization 


Validation and Serialization 


Fastify uses a schema-based approach, and even if it is not mandatory we recommend using JSON Schema to validate your routes and 
serialize your outputs. Internally, Fastify compiles the schema into a highly performant function. 


The route validation internally relies upon Ajy, which is a high-performance JSON schema validator. Validating the input is very easy: 
just add the fields that you need inside the route schema, and you are done! The supported validations are: 


© body : validates the body of the request if it is a POST or a PUT. 
® querystring : validates the query string. This can be a complete JSON Schema object (witha type property of ‘object’ anda 
‘properties’ object containing parameters) or a simpler variation in which the type and properties attributes are forgone 
and the query parameters are listed at the top level (see the example below). 
© params : validates the route params. 


Deep verification 

As shown in the documentation 
screenshot accompanying this 
boxout, Fastify can apply a total 
of four different verifiers to 
incoming requests. In addition 
to the parameter and the body 
checks shown in the tutorial, 
validation can be performed 
against the entire query string 
or the contents of the request 
header - activating multiple 
matchers at the same time is 
permitted too. The somewhat 
unwieldy schemes can also be 
registered with the framework 
via its addSchema method - 
once a verification template has 
its ID, you can add it to multiple 
routes ina more compact 
fashion. Finally, keep in mind 
that you can change the settings 
of the schema compiler: simply 
use the setSchemaCompiler 
function to add a custom worker 
of choice. 


schemas © headers : validates the request headers. 
Schema Compiler Example: 
Serialization 
Resources const schema = { 
body: £ 
18. Emit information 19. Install Pretty Printer... 


Google's introduction of LogCat changed the world of 
logging forever: instead of simply emitting a series of 
textual messages, users now expect ‘ranking’ information, 
colour-coding the messages. Fastify solves this problem 
by integrating Pino, thereby enabling developers to 
access various priority levels comfortably. 
fastify.listen(3000, (err) => { 
if (err) { 
fastify.log.error(err) 
process.exit(1) 
3 
fastify.log.info(‘server listening on 
${fastify.server.address().port}*) 
fastify.log.error(‘Time to say Goodbye’) 


By default, Pino’s logging output is relatively bland. This 
problem can be addressed via Pretty Printer — it is a small 
command-line utility that takes in textual input and adds 
some formatting characters. The most comfortable way 
to use Pino involves installing it globally. 
tamhan@tamhan-thinkpad:~$ sudo npm install -g 
pino-pretty 
[sudo] password for tamhan: 
/usr/bin/pino-pretty -> /usr/lib/node_modules/ 
pino-pretty/bin. js 
+ pino-pretty@2.2.0 


20....and beautify your logs 


Once the global installation of ‘pino-pretty’ has 


show up without the various JSON elements present in 
‘normal’ output. 

tamhan@tamhan-thinkpad: ~/nodespace/ 
fastifytest$ node index | pino-pretty 
[1537424752877] INFO (11100 on tamhan- 
thinkpad): Server listening at 
http://127.0.0.1:3000 

[1537424752878] INFO (11100 on tamhan- 
thinkpad): server listening on 3000 
[1537424752878] ERROR (11100 on tamhan- 
thinkpad): Time to say Goodbye 


21. Learn more 
Like most projects maintained by Matteo Collina, Fastify 
comes with excellent documentation. Visit fastify.io/ 


i succeeded, simply pipe the unformatted Node js output docs/latest/Getting-Started/ on a PC or a similar device 
into ‘pino-pretty’”. From that moment onward, logging with a wide screen to make the table of contents show up 
messages will be colour-coded and will furthermore — and dig in as deep as you feel like it. 

dganch cibaiasibase Fastify / Documentation / v1.11.x / Getting Started 
Getting Started 
Getting Started 
Install 
Your first server Hello! Thank you for checking out Fastify! 
This document aims to be a gentle introduction to the framework and its features. It is an elementary introduction with examples and 
Your First plugin links to other parts of the documentation. 
Loading order of your plugins Let's start! 
Validate your data 
Install q 
Serialize your data 
Extend your server npm i fastify --save 
Test your server 
Run your server from CLI 5 
Your first server q 
Slides and Videos 
Let's write our first server: 
Server 
Routes / Require the framework and instantiate it 
- const fastify = require('fastify') ({ @ 
Logging logger: true 
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Featured host: Netcetera 


netcetera.co.uk 
03330 439780 


About us 


Formed in 1996, Netcetera is one of 
Europe’s leading web hosting service 
providers, with customers in over 75 
countries worldwide. 

As the premier provider of 
data centre colocation, cloud hosting, 
dedicated servers and managed web 
hosting services in the UK, Netcetera 
offers an array of services designed to 
more effectively manage IT 


What we offer 

« Managed hosting - A full 
range of solutions for a cost- 
effective, reliable, secure host. 


- Cloud hosting - Linux, 
Windows, Hybrid and Private 
Cloud Solutions with support 
and scalability features. 


5 tips from the pros 

1. Reliability, trust & support 
Reliability is a major factor when it 
comes to choosing a hosting partner. 
Netcetera guarantees 100 per cent 
uptime, multiple internet routes with 
the ability to handle DDOS attacks, 
ensuring your site doesn't go down 
when you need it. 


2. Secure and dependable 
etcetera prides itself on offering its 
clients a secure environment. 

t is accredited with ISO 27001 for 
security along with the options of 
configurable secure rackspace available 
in various configurations. 


3. 24/7 technical support 


etcetera has a committed team of 


infrastructures. A state-of-the-art data 
centre environment enables Netcetera 
to offer your business enterprise-level 
colocation and hosted solutions. 
Providing an unmatched value for your 
budget is the driving force behind our 
customer and managed infrastructure 
services. From single server to fully 
customised data centre suites, we focus 
onthe IT solutions you need. 


- Data centre colocation - 
Single server through to full 
racks with FREE setup and a 
generous bandwidth. 


- Dedicated servers - From 
QuadCore up to Smart Servers 
with quick setup and 
fully customisable. 


knowledgeable staff available 24/7 to 
provide you with assistance when you 
need it most. Our people make sure 
you are happy and your problems are 
resolved as quickly as possible. 


4. Value for money 

We do not claim to be the cheapest 
service available, but we do claim to 
offer excellent value for money. We also 
provide a price match on a like-for-like 
basis, as well as a price guarantee for 
your length of service. 


5. Eco-friendly 

Netcetera’s environmental commitment 
is backed by use of eco-cooling and 
hydroelectric power. This makes 
Netcetera one of the greenest data 
centres in Europe. 
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66 Premier provider of 

data centre colocation, cloud 
hosting, dedicated servers 
and managed web hosting 
services in the UK 99 


One of the greenest and mast efficient 


Netcetera Hosting 


Testimonials 
RoyT 


Datacentres'in' the UK 
#ZeroCatbonDatacentre 


Learn More Browse Racks 


Our Services 


“have always had great service from Netcetera. Their technical support is 
” 
second to none. My issues have always been resolved very quickly. 


Suzy B 


“e 
We have several servers from Netcetera and their network connectivity is 


top-notch, with great uptim 


knowledgeable and quick in replying. We would high 


Steve B 


“We put several racks into 


etcetera, basically a comp! 


e and speed is never an issue. Tech support is 


ly recommend Netcetera.” 


lete corporate backend. 


They could not have been more professional, helpful, responsive or friendly. All 
the team were an absolute pleasure to deal with, and ni 


trouble, so they matched ou 


requirements 100 per ce 


jothing was too much 
” 
nt. 


Supreme hosting 


OCWCS irre Siero 
MANAGED HOSTING 

cwcs.co.uk 

08001777000 

CWCS Managed Hosting is the UK’s 
leading hosting specialist. They offer a 
fully comprehensive range of hosting 
products, services and support. Their 
highly trained staff are not only hosting 
experts, they're also committed to 
delivering a great customer experience 
and are passionate about what they do. 


« Colocation hosting 
- VPS 
- 100 per cent network uptime 


UK-based hosting 


<ée CYBERHOST 


cyberhostpro.com 

0845 5279 345 

Cyber Host Pro are committed to 
providing the best cloud server 
hosting in the UK; they are obsessed 
with automation. If you're looking for a 
hosting provider who will provide you 
with the quality you need to help your 
business grow, then look no further 
than Cyber Host Pro. 


- Cloud VPS servers 
- Reseller hosting 
- Dedicated servers 


Cluster web hosting 
fasthosts 


fasthosts.couk 

0808 1686777 

UK-based and operating 24/7 from 
dedicated UK data centres. Fasthosts 
keep over one million domains running 
smoothly and safely each day. Services 
can be self-managed through the 
Fasthosts Control Panel. 


- Dedicated servers 
- Cloud servers 
- Hosted email 


Budget hosting 


HETZNER 


ONLINE 


hetzner.com 

+49 (0)9831505-0 

Hetzner Online is a professional web 
hosting provider and experienced data 
centre operator. Since 1997, the company 
has provided private and business clients 


All-inclusive hosting 


land1.co.uk 

0333 3365509 

1&1 Internet is a leading hosting 
provider that enables businesses, 
developers and IT pros to succeed 
online. Established in 1988, 1&1 now 


with high-performance hosting products 
as well as the infrastructure for the 
efficient operation of sites. A combination 
of stable technology, attractive pricing, 
flexible support and services has enabled 
Hetzner Online to strengthen its market 
position nationally and internationally. 


- Dedicated/shared hosting 
- Colocation racks 
- SSL certificates 


operates across ten countries. With a 
comprehensive range of high- 
performance and affordable products, 1&1 
offers everything from simple domain 
registration to award-winning website 
building tools, eCommerce packages and 
powerful cloud servers. 


- Easy domain registration 
- Professional eShops 
- High-performance servers 


SSD web hosting 


<> bargainhost 


bargainhost.co.uk 

0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 
priced hosting in the UK. They have 
achieved this goal successfully and built 
up a large client database, which includes 
many repeat customers. They have also 
won several awards for providing an 
outstanding hosting service. 

« Shared hosting 

- Cloud servers 

- Domain names 


Agency hosting specialist 


STORM 


nimbushosting.co.uk 
02031266781 

Nimbus Hosting have partnered with 
agencies to develop our revolutionary 
platform STORM. With a team dedicated 
to outstanding support our 5 star Google 
reviews truly speak for themselves. Join 
the thousands of agencies and 
freelancers who are benefitting from a 
control panel that speeds up your website 
developement as well as your client’s 
websites. Super charge your digital 
projects today with STORM. 

¢ 30 second WordPress install 
¢ Deploy directly from GitHub 
e Easy team management 


Flexible cloud servers 


elastichosts 


elastichosts.co.uk 

020 7183 8250 

ElasticHosts offer simple, flexible and 
cost-effective cloud services with 
high performance, availability and 
scalability for businesses worldwide. 
Their team of engineers provide 
excellent support 24/7 over the phone, 
by email and with a ticketing system. 

- Cloud servers with any OS 

« Linux OS containers 

- 24/7 expert support 
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Get your listing in our directory 


To advertise here contact Chris 


chris.mitchell@futurenet.com 
+44 (0)1225 687832 


COURSE LISTINGS 


Featured: 


ORTH Northcoders 
Cc O D = Ie S Tie ees 


Facebook: Northcoders 


66 No matter what your 
background, you can 
fast-track your career and 


Northcoders is the coding bootcamp full-time bootcamp, or fit their course 


for the north, based in the heart of around your life with their 24-week 

Manchester and built upon northern part-time bootcamp. Their internal become a web or software 
values of grit, determination and career support team will help find you s 

community spirit. No matter what work as a developer, setting up developer ‘igi 12 weeks 99 
your background, you can fast-track interviews with your choices of 

your career and become a web or Northcoders Hiring Partners across 


software developer in 12 weeks at their the north of England. 


¢ Full-time: ¢ Part-time: 
Fast-track your career Fit our curriculum around 
in just 12 weeks. yout life in 24 weeks. 


Become a software 


developer in just 
12 weeks 


1. Get started with coding for you, set aside a few evenings 
The best way to know if coding = each week to really start making 


iS for you is to just try it! We progress! If coding is for you, 
recommend the free, online this should be fun. 
JavaScript track of 
Codecademy to get you 4. Be prepared 
started with the basics. We'll be with you every step of 
the way when you apply. Make sade api esata 
2. Do your research sure you go through all the 
Make sure you read plenty materials we recommend and 
of student reviews to make ask for help if you're stuck. 
sure you're applying 
somewhere reputable. Read 5. Get social 
their blog and have a look at With Northcoders, youre not 
their social channels. just on a course, youre part of a 
community that will stay with 2 
3. Throw yourself in you long after you graduate. 7 ae 2 


Once you've decided it’s right Make the most of it! 


Northcoders delivered their part of the bargain in spades. 
They provided tremendous assistance in turning me into 
the full product - a well-rounded, capable, future tech 
employee - and they have the contacts to deliver the 
opportunities for such people. 

Joe Mulvey 

Maths teacher to software developer at Auto Trader 


Becoming part of this vibrant, caring community was 
something | hadn’t expected before the course, but 
now | couldn't be without it. To be a Northcoder is to 
be enlightened, inspired and supported. 

Joanne Imlay 

Primary school teacher to software developer at Careicon 
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U d emy WEGOT CODERS 


‘2 WE GOT CODERS 


UDEMY 

udemy.com wegotcoders.com 
hello@wegotcoders.com 

Twitter:@udemy We Got Coders is a consultancy that 

Facebook: udemy provides experts in agile web 


development, working with startups, 
The inspiration for Udemy began ina . = 3 gua en eae eT bay agencies and government. Take one of 
small village in Turkey, where founder avee @ - B NGS LEAR N their 12-week training courses that covers 
Eren Bali grew up frustrated by the —a° MIN all that is required to become a web 


Get your learning lineup ready. 


limitations of being taught in a : bibhviep tc oaks developer, with highly marketable 


one-room school house. Realising 

the potential of learning on the internet, 
he set out to make quality education 
more accessible. Udemy is now a 
global marketplace for learning and 
teaching online. Students can master 
new skills by choosing from an 
extensive library of over 40,000 
courses including HTML, CSS, UX, 
JavaScript and web development. 


40,000+ courses: There is a 
course for every designer and dev. 
Self-paced learning: Learn how 
to code at your own pace. 


= THE 
IRON YARD 


theironyard.com 


Twitter: @ThelronYard 
Facebook: ThelronYard 


The Iron Yard is one of the world’s 
largest and fastest-growing in-person E r 4 
code schools. It offers full-time and Wee ad 
part-time programs in backend Opie : 
engineering, frontend engineering, ‘ 
mobile engineering and design. The 
lron Yard exists to create real, lasting 
ange for people, their companies 
and communities through technology 
ucation. The in-person, immersive 
format of The Iron Yard's 12-week 
courses helps people learn to code 
and be prepared with the skills needed 
to start a career as junior-level 
software developers. 


12-week code school: Learn 
the latest skills from industry pros. 
Free crash courses: One-night 
courses, the perfect way to learn. 


full-stack web development skills. 


- Classroom-based training 
« Real-world work experience 
- Employment opportunities 


FUTURELEARN 


Future 
Learn 


futurelearn.com 
feedback@futurelearn.com 
Choose from hundreds of free online 
courses, from Language & Culture to 
Business & Management; Science & 
Technology to Health & Psychology. 
Learn from the experts. Meet educators 
from top universities who'll share their 
experience through videos, articles, 
quizzes and discussions. 


- Learn from experts 
- Free courses 
- All-device access 


GYMNASIUM 


GYMNASIUM 


thegymnasium.com 
help@thegymnasium.com 
Gymnasium offers free online courses, 
designed to teach creative 
professionals in-demand skills. 
Courses are all self-paced and taught by 
experienced practitioners with a passion 
for sharing practical lessons from the 
design trenches. 


- Gain real-world skills 


- Get expert instruction 
- Career opportunities 
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Free with. 
your magazine 


Instant access to these creative resources... 


Plus, all of this 
Is yours too... 
Get textures, fonts, Learn to code/create All the assets you'll need All-new tutorial files to help you 
backgrounds and more —_-with HTML, CSS & JS to follow our tutorials master this issue’s HTML, CSS 
and JavaScript techniques 
Sa + 75 minutes of expert PHP video 
courses from Killersites 
(shop.killervideostore.com) 

* 20 Vibrancy Photoshop actions 
and 100 essential brush strokes 
from Sparklestock 
(www.sparklestock.com) 


Free 
Log ue fo) mel (elir=] 
Register to get instant access - readers, too! 
to this pack of must-have —. Read on your tablet, 
creative resources, how-to  Bilee oe your 


; : computer 
videos and tutorial assets 


| ry | a 
FileSilo 
The home of great 
downloads — exclusive to 


your favourite magazines 

from Future! 

Q Secure and safe online 

© access, from anywhere 

Q Free access for every 

© reader, print and digital 

Q Download only the files 
you want, when you want 


8 All your gifts, from all your want frivis 
issues, in one place eSIG siete 


THE. 


Everything you need to 
know about accessing 
your FileSilo account 


Follow the instructions 


on screen to create an 


account with our secure FileSilo Su bscribe today & unlock the free 


system. Log in and unlock the 


prteinireerct gifts from more than 60 issues 


Over 60 hours More than Over 250 
of video guides 400tutorials creative assets 


You can access FileSilo 

on any computer, tablet 
or smartphone device using any 
popular browser. However, we 


recommend that you use a z 
computer to download content, DEVELOPMENT ; 
as you may not be able to 
download files to other devices. 
Designing the animation test environment = el 


Head to page 34 to subscribe now 


If you have any 


pranemeuin ©) Already a print subscriber? + 
accessing content on FileSilo, © More 
take a look at the FAQs online Unlock the entire Web Designer FileSilo library with your added 
or email our team at the unique Web ID — the ten-digit alphanumeric code printed above eve 
address below: your address details on the mailing label of your subscription issue 


filesilohelp@futurenet.com copies — also found on any renewal letters. 


NEXT MONTH 


DESIGN, DEVELOP 
AND CREATE WITH 


GOOGLE 


Discover the best pro tools, frameworks 
and libraries to power up your projects 


UNIQUE LAYOUTS . GOINTERNATIONAL . GSAP ANIMATION 


WITH CSS SHAPES": WITH ANGULAR MASTERCLASS 
Introduce circles, squares and more to : Learn how to make applications available : Discover easing, control animations, work 
build printstyle layouts for the web : and user-friendly to a worldwide audience : with timelines and extend with plugins 


Visit the WEB DESIGNER online shop at MAVEN (OLE SN a) 


myfavouritemagazines 
myfavouritemagazines.co.uk [ESE zs4 Mela we (= 
for the latest issue, back issues and specials URE a iui fe (-ti l= 4ey [33 


SUBSCRIBE TODAY Go to page 34 to learn more 


FUTURE 


98 next month 


= This is the moment a 
when a click = —— 


turns into a lead. 


PRESS AHEAD 


WP Engine’s digital experience platform drives your business forward faster. wpengine.co.uk WP eng INe 


Take delivery of more 
than just a computer... 


St 
Wty 
Co, 2s 
De 
Gol 
3 Years Rusted 
Warranty pect 
feefoce 
== ss =] —_ 
Fast Trusted 
Delivery Since 1984 
Tailored Over 4,000 Custom 
Clients | Built PCs 


Subscriptions 


Renewal Monthly Cost Affordable 


stlaber 95% Approval Fixed 
Program Rate 


Set so much more 
with Flexi-Lease 


Business users only 


U . 
HARDSOFT sear Discover the benefits of leasing computers for business 
at www. hardsoft.co.uk Email infofdhardsoft.co.uk 


ONE STOP COMPUTER LEASING 


